如何在vue-cli3.0中自定css、js和图片的打包路径
这篇文章将为大家详细讲解有关如何在vue-cli3.0中自定css、js和图片的打包路径,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
10年积累的网站建设、成都网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有龙沙免费网站建设让你可以放心的选择与我们合作。
分析
众所周知,vue-cli3.0使用了webpack进行打包处理,那么我们是否可以拿到目前打包默认的一些webpack配置,并在这些配置中找到一些蛛丝马迹,从而更改配置来实现对打包路径的更改呢?
好在vue-cli3.0提供了这样的功能!
我假设您已经安装了vue-cli3.0,那么打开命令行,运行一下命令:
vue ui
这个命令将会启动一个页面,用来简化开发过程中的一系列操作。
我们先导入当前项目(自己摸索下,此处不展开详说)。
我们进入<任务>页面,点击inspect选项卡,并点击运行按钮,将会得到该项目下所有的webpack配置项。
将这个配置复制到我们的编辑器中,然后我们查找路径'js/', 'css/', 'img/',将会看到这些路径所配置的一些地方,我的项目中这些配置在以下部分:
output配置为:
output: { path: 'xxx', filename: 'js/[name].[contenthash:8].js', publicPath: '', chunkFilename: 'js/[name].[contenthash:8].js' }
plugin配置为:
/* config.plugin('extract-css') */ new MiniCssExtractPlugin( { filename: 'css/[name].[contenthash:8].css', chunkFilename: 'css/[name].[contenthash:8].css' } ),
loader配置为:
/* config.module.rule('images') */ { test: /\.(png|jpe?g|gif|webp)(\?.*)?$/, use: [ /* config.module.rule('images').use('url-loader') */ { loader: 'url-loader', options: { limit: 4096, fallback: { loader: 'file-loader', options: { name: 'img/[name].[hash:8].[ext]' } } } } ] }, /* config.module.rule('svg') */ { test: /\.(svg)(\?.*)?$/, use: [ /* config.module.rule('svg').use('file-loader') */ { loader: 'file-loader', options: { name: 'img/[name].[hash:8].[ext]' } } ] }, // 其他类型资源的loader等等
那么问题就简单了,我们更改掉这些webpack配置就可以了。
更改webpack配置
需要更改的webpack相关配置如下:
js路径配置更改
js路径更改output配置即可,output配置在configureWebpack配置项中进行更改,因为vue.config.js中对于configureWebpack选项的配置将会被merge到webpack配置中,所以更改该项配置即可,如下:
module.exports = { configureWebpack: config => { // js output config config.output.filename = '[name].[contenthash:8].js' config.output.chunkFilename = '[name].[contenthash:8].js' }, }
更改MiniCssExtractPlugin插件配置
更改该配置需要先安装MiniCssExtractPlugin插件到开发依赖中,如下:
npm install --save-dev mini-css-extract-plugin # 或者 yarn add mini-css-extract-plugin --dev
然后在vue.config.js文件中添加相关配置到chainWebpack即可,如下所示:
module.exports = { chainWebpack: config => { // css output config let miniCssExtractPlugin = new MiniCssExtractPlugin( { filename: '[name].[contenthash:8].css', chunkFilename: '[name].[contenthash:8].css' } ) config.plugin('extract-css').use(miniCssExtractPlugin) }, }
更改各种资源loader配置
更改该配置仍然需要将相关配置添加到chainWepack配置项中,如下:
module.exports = { chainWebpack: config => { // image output config config.module.rule('images') .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .use('url-loader') .loader('file-loader') .options({ name: '[name].[hash:8].[ext]' }) config.module.rule('svg') .test(/\.(svg)(\?.*)?$/) .use('file-loader') .loader('file-loader') .options({ name: '[name].[hash:8].[ext]' }) }, }
结语
总的配置项如下所示:
module.exports = { configureWebpack: config => { // js output config config.output.filename = '[name].[contenthash:8].js' config.output.chunkFilename = '[name].[contenthash:8].js' }, chainWebpack: config => { // css output config let miniCssExtractPlugin = new MiniCssExtractPlugin( { filename: '[name].[contenthash:8].css', chunkFilename: '[name].[contenthash:8].css' } ) config.plugin('extract-css').use(miniCssExtractPlugin) // image output config config.module.rule('images') .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .use('url-loader') .loader('file-loader') .options({ name: '[name].[hash:8].[ext]' }) config.module.rule('svg') .test(/\.(svg)(\?.*)?$/) .use('file-loader') .loader('file-loader') .options({ name: '[name].[hash:8].[ext]' }) }, }
这时,在运行inspect检查webpack配置,即可看到相关路径前的css/,js/,img/等前缀已经消失,快快打包尝试吧!
关于“如何在vue-cli3.0中自定css、js和图片的打包路径”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前名称:如何在vue-cli3.0中自定css、js和图片的打包路径
链接地址:http://scyanting.com/article/gcjdde.html