详解在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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
JavaScript 事件系统
Jul 22 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
微信小程序实现手势滑动效果
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
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
vue中的inject学习教程
2019/04/24 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
法制教育演讲稿
2014/09/10 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
护士医德医风心得体会
2016/01/25 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis