详解在vue-cli3.0中自定css、js和图片的打包路径
前言
我们有时候因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹，并不能针对css/js/img等资源文件分别来做设置，那么请看我如何尝试的吧！
分析
众所周知，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/等前缀已经消失，快快打包尝试吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue3项目pc端浏览器样式正常但移动端部分样式失效问题的解决方法
这篇文章主要介绍了Vue3项目pc端浏览器样式正常但移动端部分样式失效问题的解决方法,文中通过图文讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue地址栏直接输入路由无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了浅谈Vue路由快照实现思路及其问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家详细介绍了vue前后分离调起微信支付，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了vue webpack多页面构建的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue keep-alive中的生命周期,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了el-select组件绑定change事件的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
将 unix 时间戳转换为日期时间和使用日期时间转换为 unix 时间戳,在项目中常常用到,其中vue中的moment库很是方便,下面小编就来为大家讲讲具体使用吧2023-09-09
最近公司项目有个导出ppt的功能,在使用ppexgen.js一周完成功能之后,这篇文章主要给大家介绍了关于前端vue如何使用pptxgen.js导出PPT的相关资料,需要的朋友可以参考下2024-01-01
Vue通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法） 实现数据劫持。下面简单记录一下，vue监听数据变化的原理2023-01-01
最新评论