vue配置各种环境-环境切换问题-打包自由切换

vue-cli版本是2.0左右的就会有webpack的config目录
vue-cli版本是3.0以上的就会有vue.config.js没有config目录

我们先来看第一种怎么配置（有webpack的config目录）
目录：
配置：这里一共展示dev环境和生产环境，其他环境在config目录类似添加

需要下载cross-env

npm install --save-dev cross-env

警告！确保在安装软件包时可以正确拼写，以免错误安装恶意软件

注意：cross-env的版本6仅支持Node.js 8和更高版本，才能在Node.js 7或更低版本的安装版本5上使用npm
install --save-dev cross-env@5

使用（举例）

{"scripts": {"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"}
}

第一步： config目录=》index.js

  dev: {assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {   [process.env.API_ROOT]: {   // target: `http://xxx:8888`,  // 当设置process.env.API_ROOT之后。target就没用了他会自动识别你登录的是dev还是prod环境，从而自己切换域名changeOrigin: true,pathRewrite: {['^' + process.env.API_ROOT]: ''}}},

第二步：config目录=》dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',ENV_CONFIG: '"dev"',API_ROOT:'http://xxx.con'//这里是dev环境的域名配置
})

第三步：config目录=》dev.env.js

'use strict'
module.exports = {NODE_ENV: '"production"',ENV_CONFIG: '"prod"',API_ROOT:'http://xxx.com'  // 生产环境}

第四步build目录=》webpack.prod.conf.js

//const env = require('../config/prod.env')  注释这一行改为下面一行
const env = require('../config/' + process.env.env_config + '.env')

第五步在你封装axios时，需要进行配置

// 获取当前你使用到的所有环境，通过对env判断拿到对应的API_ROOT
const proEnv = require("../../config/prod.env");
const devEnv = require("../../config/dev.env");
const env = process.env.NODE_ENV;
let target = "";
if (env === "production") {target = proEnv.API_ROOT;
} else {target = devEnv.API_ROOT;
}
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: target,// baseURL: 'http://xxx.com',// 超时timeout: 60000
})

第六步：打包？？ package.json

在dev下面添加：

 "build:dev": "cross-env NODE_ENV=development env_config=dev node build/build.js","build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",

注意NODE_ENV以及env_config配置的时候一定要对应清楚，名字不能马虎

打包自由切换

打包生产：npm run build:prod
打包dev: npm run build:dev

-第二种情况（有vue.config.js）这里vue.config如果没有也是可以自己创建的

第一步，创建需要的环境文件，这里有五种环境

内容：（每个文件内容是相同的只是env与VUE_APP_BASE_API设置的不一样）

# 页面标题
VUE_APP_TITLE = xxx# 生产环境配置
ENV = 'production'# 案件管理系统/生产环境
VUE_APP_BASE_API = 'http://xxx.com'

这里其他就不介绍了与上面是雷同的
第二步vue.config.js

 devServer: {host: '0.0.0.0',port: port,open: true,proxy: {[process.env.VUE_APP_BASE_API]: {//target: `http://xxx:8080`, // 同样是没有影响的changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}}},},

第三步

const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: process.env.VUE_APP_BASE_API,  // 直接获取环境地址自由切换// 超时timeout: 60000
})

第四步

"scripts": {"dev": "vue-cli-service serve","build:dev": "vue-cli-service build --mode dev","build:prev": "vue-cli-service build --mode prev","build:prod": "vue-cli-service build","build:test": "vue-cli-service build --mode test","preview": "node build/index.js --preview","lint": "eslint --ext .js,.vue src"},

打包自由切换:其他类似

打包生产：npm run build:prod
打包dev: npm run build:dev
打包test: npm run build:test

vue配置各种环境-环境切换问题-打包自由切换相关推荐

Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)
Vue 配置使用 externals 使用cdn减小打包体积在 vue.config.js 中书写配置 // 引入webpackconst webpack = require('webpack') ...
vue配置多个跨域+下载打包
本地项目需要下载阿里云上的文件,而且需要前端下载后打包1.配置多个代理 devServer: {host: '0.0.0.0',port: port,proxy: {[process.env.VUE_ ...
如何做到在虚拟数据库和真实数据库之间自由切换？【低调赠送：QQ高仿版GG 4.4 最新源码】...
记得以前在公司上班时,有时候白天的活没干完,我就会把工作带回家晚上加班继续做.但是,我们开发用的数据库是部署在公司局网内部的一台服务器上的,在家里是肯定连不上这台机器的.在家里没有数据库,服务端就跑不 ...
开发vue用什么ide_VUE项目开发前期需要准备和配置些什么环境？
VUE项目开发前期需要准备和配置些什么环境? Node环境下载:https://nodejs.org/en/,安装在G盘 npm包管理工具(package manager)自动安装完成. 使用npm ...
vue配置开发、测试、生产环境（proxy中获取process.env.NODE_ENV）
先是看了这个文章写的如何npm run build 的时候自动配置地址参考文章"vue配置开发.测试.生产环境(不同环境,不同命令)_Amy_cloud的博客-CSDN博客_vue生产环境 ...
Vue.config.js开发环境与生产环境配置
Vue.config.js开发环境与生产环境配置首先在项目根目录创建 .env.development 开发环境 .env.production 生产环境 VUE_APP_SERVICE_URL V ...
基于node.js开发环境下创建及开发vue.js项目的环境配置骤
基于node.js开发环境下创建开发vue.js项目的环境配置骤如下: 步骤一:安装node.js,安装完后运行node -v命令检安装node的查版本,判断是否安装成功.Npm是node.js包管理 ...
Vue安装过程及环境配置
Vue安装过程及环境配置本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. 通过WIN+R输入CMD打开命令行(必须是以管理员身份运行),输入: npm confi ...
深圳Java培训学习：SpringBoot的yml配置及多环境切换【千锋】
深圳Java培训学习:SpringBoot的yml配置及多环境切换[千锋] 1,配置风格从application.properties转换到application.yml 并不改变功能效果,只是改变 ...

vue配置各种环境-环境切换问题-打包自由切换

vue配置各种环境-环境切换问题-打包自由切换相关推荐

最新文章

热门文章