详解在vue-cli3.0中自定css、js和图片的打包路径


Posted in Javascript onAugust 26, 2019

前言

我们有时候因为一些特殊需求,可能需要将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/等前缀已经消失,快快打包尝试吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
在js中修改html body的样式
Nov 11 Javascript
微信小程序实现手势滑动效果
Aug 26 #Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 #Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 #Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 #Javascript
js实现跟随鼠标移动的小球
Aug 26 #Javascript
vue 源码解析之虚拟Dom-render
Aug 26 #Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 #Javascript
You might like
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php导出excel格式数据问题
2014/03/11 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Django模板语言 Tags使用详解
2019/09/09 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
python logging模块的使用详解
2020/10/23 Python
体育教育毕业生自荐信
2013/11/21 职场文书
一岗双责责任书
2014/04/15 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
学校师德师风整改方案
2014/10/28 职场文书
债务纠纷起诉书
2015/05/20 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
vue封装数字翻牌器
2022/04/20 Vue.js