vue-cli3分环境打包配置
概述在项目开发过程中一般会分为三种运行环境:开发环境、测试生产环境、正式生产环境,不同的环境在配置上的要求会有所不同,最简单的例子就是请求后端的接口地址不同。在打包过程中需要区分不同的运行环境手动去修改配置,这是一项枯燥且没有技术含量的工作,对于这种能用工具解决的工作就不要去人肉操作了,就算避免不了人肉操作,但也尽量让它来得简单点。接下来主要讲解在vue-cli3项目中打包怎么解放人肉配置,...
概述
在项目开发过程中一般会分为三种运行环境:开发环境、预览环境、生产环境,不同的环境在配置上的要求会有所不同,最简单的例子就是不同的环境对后端的接口请求地址不同。
打包过程中因需区分不同的运行环境而经常要手动去修改配置,这是一项枯燥且没有技术含量的工作,对于这种能用工具解决的工作就不要去人肉操作了,就算避免不了人肉操作,但也尽量让它来得简单点,比如输入不同命令就自动打不同环境的包。
接下来主要讲解在vue-cli3项目中怎么解放人肉配置打包,利用工程化和自动化提高打包效率。
第一步:创建配置文件
在项目根目录创建3个配置文件
.env.development 开发模式打包(运行命令 npm run serve
默认读取的配置)
.env.production 生产模式打包(运行命令 npm run build
默认读取的配置)
.env.preview 预览模式打包(运行命令 npm run build --mode preview
需要读取的配置)
注:vue-cli3脚手架中内置了.env.development
与.env.production
的默认配置,新增这两个配置文件后打包过程中webpack会合并默认配置和自定义配置的内容
.env.development
NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
VUE_APP_BASE_URL = 'http://development.lihefei.com:8080'
VUE_APP_WEBSOCKET_URL = 'ws://development.lihefei.com:21000'
.env.production
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
VUE_APP_BASE_URL = 'http://lihefei.com:8080'
VUE_APP_WEBSOCKET_URL = 'ws://lihefei.com:21000'
.env.preview
NODE_ENV = 'production'
VUE_APP_TITLE = 'preview'
VUE_APP_BASE_URL = 'http://alpha.lihefei.com:8080'
VUE_APP_WEBSOCKET_URL = 'ws://alpha.lihefei.com:21000'
outputDir = 'preview'
属性说明:
NODE_ENV = development
开发环境
NODE_ENV = production
生产环境
VUE_APP_TITLE = development
开发模式打包
VUE_APP_TITLE = preview
预览模式打包
VUE_APP_TITLE = production
生产模式打包
VUE_APP_BASE_URL
后端常规业务接口地址(自定义,必选)
VUE_APP_WEBSOCKET_URL
后端websocket推送接口地址(自定义,项目没有需求就不需要添加这一行配置)
outputDir
打包输出目录名称(.env.development
与.env.production
因vue-cli3脚手架中有默认配置可以省略该项)
第二步:修改package.json
在scripts中新增命令:"preview": "vue-cli-service build --mode preview"
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"preview": "vue-cli-service build --mode preview"
}
第三步:新建process-env.js获取接口地址
这个文件的作用是获取到process.env自定义的各种参数,然后根据需求自定义输出
export const baseUrl = process.env.VUE_APP_BASE_URL; //后端常规业务接口地址
export const websocketUrl = process.env.VUE_APP_WEBSOCKET_URL; //后端websocket推送接口地址
export default {
baseUrl,
websocketUrl
};
第四步:配置axios的baseURL
import { baseUrl } from './process-env';
axios.defaults.baseURL = baseUrl;
第五步:编辑vue.config.js配置输出路径
module.exports = {
outputDir: process.env.outputDir, //根据配置文件输出目录
};
第六步:打包
通过前面的配置后,可以输入不同的命令实现差异化打包
正式生产环境打包
npm run build
预览环境打包
npm run preview
到这一步已经满足不同打包模式下接口的自动配置,可以愉快的尝试不同环境的打包效果了
如果对打包优化或更多差异化处理感兴趣继续往下看吧
第七步:打包优化及差异化处理
继续编辑vue.config.js
配置文件
优化点:
1.生产环境不生成map文件
2.区分开发环境与生产环境静态资源路径
3.正式生产环境删除debugger及console.log
const isProduction = process.env.NODE_ENV === 'production'; //是否是生产环境
const isPreview = process.env.VUE_APP_TITLE === 'preview'; //是否是预览环境
const TerserPlugin = require('terser-webpack-plugin'); //压缩js的插件(需npm安装)
module.exports = {
outputDir: process.env.outputDir, //根据配置文件输出目录
productionSourceMap: !isProduction, //非生产环境才生成map文件
publicPath: isProduction ? './' : '/', //打包时区分开发环境与生产环境静态资源路径
configureWebpack: config => {
if (isProduction && !isPreview) {
//生产环境删除debugger及console.log
config.plugins.push(
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: true, //删除debugger
pure_funcs: ['console.log'] // 移除console
}
}
})
);
}
},
chainWebpack: config => {
if (isProduction && isPreview) {
config.optimization.minimize(false); // 预览环境不压缩js代码
}
}
};
配置完这些赶紧去尝试打包体验下优化效果吧,over~~
更多推荐
所有评论(0)