vue-cli 3 基于webpack 4, vue-cli2 基于webpack3
vue-cli3 在项目初始化的时候,已经帮开发者配置了80%,在@vue/cli-service/lib/config 目录下,可以查看配置信息。
vue.config.js 基本配置
脚手架安装完成后,在项目根目录下新建:vue.config.js文件,项目会自动加载配置信息
module.exports = {
/* 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath */
/* baseUrl: process.env.NODE_ENV === 'production' ? './' : '' */
publicPath: process.env.NODE_ENV === 'production' ? './' : '',
/* 输出文件目录:在npm run build时,生成文件的目录名称 */
outputDir: 'dist',
/* 放置生成的静态资源 (js、css、img、fonts) 的目录 */
assetsDir: "assets",
/* 是否在构建生产包时生成 sourceMap 文件,设置为 false 以加速生产环境构建*/
productionSourceMap: false,
/* 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
filenameHashing: false,
/* 代码保存时进行eslint检测 */
lintOnSave: true,
/* webpack-dev-server 相关配置 */
devServer: {
/* 自动打开浏览器 */
open: true,
/* 设置为0.0.0.0则所有的地址均能访问 */
host: '0.0.0.0',
port: 8000,
https: false,
hotOnly: false,
/* 使用代理 */
proxy: {
'/api': {
/* 目标代理服务器地址 */
target: 'http://localhost:9005/',
/* 允许跨域 */
changeOrigin: true,
},
},
},
configureWebpack: (config) => {
//基础配置
},
chainWebpack: (config) => {
//链式配置
config.module
.rule('eslint')
.exclude
.add('src/lib')
.end()
},
//https://cli.vuejs.org/zh/config/#css-loaderoptions
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
}
}
}复制代码
修改loader
eg:修改eslint 的配置,不去检测src/lib ,此处为引入的外部库文件
方法一:新建一个.eslintignore文件处理
方法二:修改webpack 文件
1) vue inspect>output.js
2)在output.js 中搜索相关配置,确定要修改的是exclude 项
3)参考webpack-chain,查找exclude,只找到一个,同级别的include 可以有多个,参照include的方法
chainWebpack: (config) => {
//链式配置
config.module
.rule('eslint')
.exclude
.add('src/lib')
.end()
},
复制代码
添加一个loader
使用了一个第三方的包,但是不支持ie浏览器,要编译的时候,把node_module 中特定的包也编译一下,添加babel-loader
.add() 内写入要编译的文件路径,.use 前要有.end 否则在 vue inspect>output.js时会报错。
chainWebpack:(config) => {
config.module
.rule('js')
.test(/\.js$/)
// .pre()
.include.add(path.resolve('node_modules/umq-node-desmd5'))
.add(path.resolve('node_modules/ms-vue-adt'))
.end().use('babel-loader').loader('babel-loader')
//添加分析工具
if(process.env.NODE_ENV === 'production'){
//npm intall webpack-bundle-analyzer –save-dev
// 代码分析工具 npm run build --report 查看
if(process.env.npm_config_report){
config.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end();
//删除预加载
config.plugins.delete('prefetch');
}
}
}复制代码
vue-cli3 打包的时候打包为gzip文件
安装依赖包
nmp i compression-webpack-plugin -D复制代码
webpck 中配置
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
}
}
}
复制代码