详解在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 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
js获取url传值的方法
Dec 18 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
vue+axios实现post文件下载
Sep 25 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接口和抽象类使用示例详解
2014/03/02 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Pygame的程序开始示例代码
2020/05/07 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
铭立家具面试题
2012/12/06 面试题
各营销点岗位职责范本
2014/03/05 职场文书
詹天佑教学反思
2014/04/30 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
企业计划生育责任书
2015/05/09 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
MySQL派生表联表查询实战过程
2022/03/20 MySQL
详解Python内置模块Collections
2022/03/22 Python