前言
我们有时候因为一些特殊需求,可能需要将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