vue.js - Vue Cli 3 为不同类型的文件构建自定义目录
问题描述
我是使用 vue 构建网络应用程序的新手。默认情况下,使用npm run build
,它将构建以下结构:
但我希望构建如下:
那么,我怎样才能vue.config.js
像我想要的那样编写 as 输出?
解决方案
以这个 GitHub 问题为例,你应该能够通过在你的配置中添加类似这样的东西来实现这一点......
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module.rule('images').use('url-loader')
.loader('file-loader') // replaces the url-loader
.tap(options => Object.assign(options, {
name: 'images/register/[name].[hash:8].[ext]'
}))
config.module.rule('svg').use('file-loader')
.tap(options => Object.assign(options, {
name: 'images/register/[name].[hash:8].[ext]'
}))
},
css: {
extract: {
filename: 'css/register/[name].[hash:8].css',
chunkFilename: 'css/register/[name].[hash:8].css'
}
},
configureWebpack: {
output: {
filename: 'js/register/[name].[hash:8].js',
chunkFilename: 'js/register/[name].[hash:8].js'
}
}
}
有关更多信息和示例,请参阅https://cli.vuejs.org/config/#vue-config-js。
推荐阅读
- java - 您多久编写一次新的 SQL 查询或尝试使用现有的查询?
- asp.net - 关闭用户会话 AXAPTA
- javascript - 当 JavaScript 中的 Copytoclipboard 时工具提示不起作用
- sqlite - 如何使用 Count 进行复杂的 SQLite 连接
- oracle - 设置从 Oracle 到 Sybase 的数据库链接
- r - 如何在观星者表中包含来自面板回归 (plm) 的组数
- javascript - Nodejs文件在发送响应之前被删除(res.send)
- angular - Redux - 如何在大型应用程序中组织存储
- r - 尽管数据在 r 中没有这样做,但误差线在图上继续(可能)无限?
- javascript - 谷歌身份验证 - 使其从 2 个按钮与 cakephp 上的 1 个按钮一起工作