vue.config.js中的webpack设置，优化及多页面应用开辟

源码 · 2024-9-7 16:12:07

一、vue.config.js中常用的设置
- 1、导出模块
- 2、publicPath 摆设应用包的根本Url
- 3、outputDir 输出文件目次
- 4、assetsDir 打包后天生的静态资源目次
- 5、lintOnSave
- 6、productionSourceMap 生产情况的 source map
- 7、devServer
- 8、 chainWebpack webpack设置
- 9、configureWebpack webpack设置
  - configureWebpack和chainWebpack区别
- 10、css相干设置
- 11、pages
- 12、其他
二、优化
- 1、优化打包chunk-vendors.js
- 2、打包时去除打印信息
- 3、开启gizp压缩
- 4、vue-cli3 图片压缩【image-webpack-loader】利用
- 5、移动端.px2rem 相应样式
三、多页面应用开辟与设置
- 搭建项目
  - - 创建项目
  - - 搭建文件布局
  - - 设置路由
  - - 设置vue.config.js
- 注意事项
- 设置页面动态标题
- 路由子模块设置
四、vue.config.js完备代码

官方文档
vue-cli3以下版本中，关于webpack的一些设置都在config目次文件中，但是vue-cli3以上版本中，没有了config目次，那该怎么设置webpack呢？
3.x初始化项目后没有了build和config文件，如果你想对webpack相干内容举行设置，必要本身在根目次下(与package.json同级)创建一个vue.config.js文件，这个文件一旦存在，那么它会被 @vue/cli-service 自动加载。(但必要我们本武艺动创建哦vue.config.js，跟package.json同级)
一、vue.config.js中常用的设置

在设置中绝大多数都是（可选项）
1、导出模块

通例利用还是用到了commjs语法

vue.config.js中的webpack设置，优化及多页面应用开辟

所属分类: 问答交流

新帖推荐: 30日

推荐作品