vue项目分环境配置打包处理

目录

vue项目分环境配置打包处理

本地环境配置

生产环境配置

打包处理

打包配置处理（扩展） 

本地环境配置

定义需要的变量，这里定义了各种变量标识，可参考使用，自定义项目需要的变量，这里定义是可以全局访问到的，用起来很方面

新建.env.development文件

NODE_ENV='development'
VUE_APP_FLAG = 'dev'# activity分支
# 地址1
# VUE_APP_API='http://192.168.0.0:9000'
# VUE_APP_IMGAPI='http://36.134.00.00:8088'
# VUE_APP_WEBSOCKET='ws://192.168.2.19:9000'# 地址2
# VUE_APP_API='http://192.168.0.1:9000'
# VUE_APP_IMGAPI='http://36.134.00.00:8088'
# VUE_APP_WEBSOCKET='ws://192.168.2.20:9000'outputDir = dev

 测试、开发环境配置

新建.env.test文件

配置测试地址变量，供全局使用

NODE_ENV='production'
VUE_APP_NAME = 'test'
VUE_APP_FLAG = 'dev'
# 测试
# VUE_APP_API='http://8.136.115.00:9010'
# VUE_APP_IMGAPI='http://8.136.115.00:8088'
# VUE_APP_WEBSOCKET='ws://8.136.115.00:9010'
# 测试更换
VUE_APP_API='http://36.134.79.00:9010'
VUE_APP_IMGAPI='http://36.134.79.00:8088'
VUE_APP_WEBSOCKET='ws://36.134.79.00:9010'outputDir = test 

生产环境配置

.env文件，也可以定其他名称（.env.production） 

NODE_ENV='production'
VUE_APP_NAME = 'production'
# 正式
VUE_APP_FLAG = 'pro'
VUE_APP_API='https://xxxxxxx'
VUE_APP_IMGAPI='https://xxxxxxxxx'
VUE_APP_WEBSOCKET='wss://xxxxxxxxxx'outputDir = dist

定义变量时记得要大写，更规范，统一标准。

这里这样分环境创建，后期在项目中使用时也非常方便。

控制打印：

console.log(process.env.VUE_APP_IMGAPI, process.env.VUE_APP_FLAG,"http地址")

显示结果：测试地址 dev

可以这样使用：

1.公共图片路由地址

Vue.prototype.$baseImgUrl = process.env.VUE_APP_IMGAPI + '/'

 页面中使用：

this.imgCard = this.$baseImgUrl + res.data;

2.  定义分享图片

Vue.prototype.$shareImageUrl = process.env.VUE_APP_NAME == "test" ? process.env.VUE_APP_IMGAPI+"/group1/M00/00/0D/JIZPL2L7PN2AMqN3AABNyC-hiVg621.png" : process.env.VUE_APP_IMGAPI+"/group1/M00/00/43/dD68XmL7PWKAJPfBAABNyC-hiVg044.png";

3.环境判断

if (process.env.NODE_ENV === 'production') {//正式环境处理
}

4.api接口

let url = process.env.VUE_APP_API
//  登录
export const login = (res) => {return reqNull("post", url + "/appuser/getUserLogin", res)
}

5.vue.config.js

module.exports = {publicPath: process.env.NODE_ENV === "production" ? "./" : "./", // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)outputDir: process.env.outputDir, //process.env.outputDir 运行时生成的生产环境构建文件的目录
}

打包处理

分环境配置之后，还有一个非常重要的功能，就是关心的打包处理，这样配置会不会打包之后地址报错，当然这样配置是没有问题的，反而会对项目的优化是非常好的。

首先要在package.json配置：

{"name": "sends","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","test": "vue-cli-service build --mode test","report": "vue-cli-service build --report"},....
}

测试包：

npm run test

正式包：

npm run build

运行结果：

打包配置处理（扩展） 

vue.config.js

代理方式配置：前端解决跨域 

多个地址配置

模块重命名

gzip压缩配置

打包文件输出重构：这里也可作为解决缓存的一种方式

移动端适配配置

插件移除

// 在vue-config.js 中加入
const Timestamp = new Date().getTime();
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {publicPath: process.env.NODE_ENV === "production" ? "./" : "./", // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)outputDir: process.env.outputDir, //process.env.outputDir 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)assetsDir: "static", //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')lintOnSave: false, // 是否开启eslint保存检测productionSourceMap: false, // 是否在构建生产包时生成sourcdeMapdevServer: {/* 本地ip地址 */host: "0.0.0.0",port: "8902",hot: true,/* 自动打开浏览器 */open: false,overlay: {warning: false,error: true}, // 错误、警告在页面弹出/* 跨域代理 */proxy: {"/api": {/* 目标代理服务器地址 */target: process.env.VUE_APP_API,// target: "http://192.168.101.99:9010",// target: "http://116.62.188.99:9010",// target: "cytestback.xxxxx.com",/* 允许跨域 */changeOrigin: true,ws: true,pathRewrite: {"^/api": ""}}, "/video": {/* 监控视频代理服务器地址 */target: "https://box.xxxx.com",/* 允许跨域 */changeOrigin: true,ws: true,pathRewrite: {"^/video": ""}}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         }},configureWebpack: config => {if (isProduction) {config.plugins.push(new CompressionWebpackPlugin({algorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240,minRatio: 0.8}))}config["externals"] = {'AMap': 'AMap','vue': 'Vue','vue-router': 'VueRouter','vuex':'Vuex','axios':'axios'}config["performance"] = {hints: 'warning',// 入口起点的最大体积 整数类型（以字节为单位）maxEntrypointSize: 50000000,// 生成文件的最大体积 整数类型（以字节为单位 300k）maxAssetSize: 30000000,// 只给出 js 文件的性能提示assetFilter: function (assetFilename) {return assetFilename.endsWith('.js')}},// 输出重构config.output.filename = `js/[name].${Timestamp}.js`config.output.chunkFilename = `js/[name].${Timestamp}.js`},css: {// sourceMap: false,loaderOptions: {postcss: {plugins: [require('postcss-plugin-px2rem')({rootValue: 75, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。// unitPrecision: 5, //允许REM单位增长到的十进制数字。//propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。// propBlackList: [], //黑名单exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值// selectorBlackList: [], //要忽略并保留为px的选择器// ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。mediaQuery: false, //（布尔值）允许在媒体查询中转换px。minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0}),]}},extract: {filename: `css/[name].${Timestamp}.css`,chunkFilename: `css/[name].${Timestamp}.css`}},chainWebpack:config => {// console.log(config,'chainWebpack');// 移除prefetch插件config.plugins.delete("prefetch");config.plugins.delete('preload');// config.module// .rule('min-image')// .test(/\.(png|jpe?g|gif)(\?.*)?$/)// .use('image-webpack-loader')// .loader('image-webpack-loader')// .options({ disable: process.env.NODE_ENV == 'development' ? true : false })// .end();}
}

⭐️⭐️⭐️  作者：船长在船上
🚩🚩🚩  主页：来访地址船长在船上的博客
🔨🔨🔨  简介：CSDN前端领域博客专家，CSDN前端领域优质创作者，资深前端开发工程师，专注web前端领域开发，在CSDN分享工作中遇到的问题以及问题解决方法和对项目开发的实际案例总结以及新技术的认识。