Vue Cli 3 为不同类型的文件构建自定义目录 [英] Vue Cli 3 build custom directory for different type of files
本文介绍了Vue Cli 3 为不同类型的文件构建自定义目录的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是使用 vue 构建 Web 应用程序的新手.默认情况下,使用npm run build
,它会构建如下结构:
I am new in using vue to build web app.
By default, use npm run build
, it will build the following structure:
但我希望构建如下:
那么,我怎样才能将 vue.config.js
写成我想要的输出?
Then, how can I write the vue.config.js
as output like what I want?
推荐答案
使用 这个 GitHub以问题为例,您应该能够通过在您的配置中添加类似的内容来实现这一点...
Using this GitHub issue as an example, you should be able to achieve this by adding something like this to your configuration...
// 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 获取更多信息和示例.
See https://cli.vuejs.org/config/#vue-config-js for more information and examples.
这篇关于Vue Cli 3 为不同类型的文件构建自定义目录的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文