一、vue-cli項目下默認有三種模式：

• development：在 vue-cli-service serve 時使用。
• production：在 vue-cli-service build 和 vue-cli-service test:e2e 時使用。
• test：在 vue-cli-service test:unit 時使用。
  對應的 process.env.NODE_ENV 值分別為 development、production、test。

二、可以通過環境文件來指定默認環境變量和自定義環境變量，環境文件有一下幾個類型：

• .env： 在所有的環境中被載入
• .env.local： 在所有的環境中被載入，但會被 git 忽略
• .env.[mode]： 只在指定的模式中被載入
• .env.[mode].local： 只在指定的模式中被載入，但會被 git 忽略

mode是某個模塊名，如 在src創建 .env.friend 文件，內容：

NODE_ENV=development // 這里可以指定默認的環境是 development、production、test。 VUE_APP_ENV=friend // 自定義的friend環境

注意自定義的變量名必須以 VUE_APP_ 開頭才能被webpack.DefinePlugin 靜態嵌入，通過process.env.VUE_APP_xxx 來訪問；執行此文件就相當于“進入”friend環境了。

三、執行自定義環境文件，進入自定義環境

在package.json中添加

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","test:unit": "vue-cli-service test:unit","test:e2e": "vue-cli-service test:e2e","lint": "vue-cli-service lint","serve:f":"vue-cli-service serve --mode friend",},

執行 npm run serve:f，此時process.env.NODE_ENV為development， process.env.VUE_APP_ENV為friend，利用process.env.VUE_APP_ENV定義ip等信息即可，即可訪問后臺朋友的接口了。

四、配置舉例和應用場景 vue-cli3

public/config/build.js，這里未使用自定義環境（未用process.env.VUE_APP_ENV）

let root = process.env.NODE_ENV;let build = {development: {//開發人員本地調試開發環境publicPath:"/",outputDir:"xuzhou_shuiwu_web",},production: {publicPath:"./",outputDir:"xuzhou_shuiwu_web",},test: {},// 公網環境pro: {}, }; // export default build[root];module.exports = build[root]

public/config/ip.js

// let root = process.env.NODE_ENV; let root = process.env.VUE_APP_ENV; // 自定義 let key = "/back";// 代理關鍵字 // 通用配置 let common = {key: key,host: "0.0.0.0",port: "8888",localhost: "0.0.0.0:8888",upload: key + "/file/uploadFile", // 文件上傳地址 } let ipConfig = {// 默認環境development: {serverIP: "http://1.1.1.1:8883/portal/", logoutIp: "http://1.1.1.1:8883/portal/cas/logout/",},// 正式環境production: {serverIP: "http://1.1.1.1:8082/portal/", logoutIp: "http://1.1.1.1:8082/portal/cas/logout/",},// 測試環境test: {},// 自定義環境friend: {serverIP: "http://1.1.1.1:8881/portal/",logoutIp: "http://1.1.1.1:8881/portal/cas/logout/",}, };// export default Object.assign(common,ipConfig[root]); console.log("當前環境：",root) module.exports = Object.assign(common,ipConfig[root])

public/config/index.js

// import ip from "./ip" // import build from "./build"const config = {ip: require("./ip"), build: require("./build") }; // export default config;module.exports = config

vue.config.js

const config = require('./public/config'); const path = require("path");function resolve(dir) {return path.join(__dirname, dir); }module.exports = {// publicPath: "./", //打包后的位置(如果不設置這個靜態資源會報404) ./// vue-cli 3 已廢棄baseUrlpublicPath: config.build.publicPath,outputDir: config.build.outputDir, //打包后的目錄名稱assetsDir: "static", //靜態資源目錄名稱devServer: {open: true, // disableHostCheck: false,host: config.ip.host,port: config.ip.port,// https: false,// hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxyproxy: {[config.ip.key]: {target: config.ip.serverIP, // jenkinschangeOrigin: true,pathRewrite: {["^" + config.ip.key]: ""}}}// before: app => {}}, // 第三方插件配置// webpack相關配置// chainWebpack: config => {// // config.entry.app = ['./src/main.js'];// config.resolve.alias.set("@", resolve("src")).set("#", resolve("public"));// },// webpack3,4的寫法configureWebpack: {resolve: {extensions: ['.js', '.vue', '.json'],alias: {'@': resolve('src'),// '~': process.cwd(),'#': resolve('public'),// components: resolve('src/components'),// util: resolve('src/utils'),// store: resolve('src/store'),// router: resolve('src/router')}}},// pluginOptions: {// // ...// },// 加載less加載器，路徑：./public/css/common.lesschainWebpack: config => {const oneOfsMap = config.module.rule("less").oneOfs.store;oneOfsMap.forEach(item => {item.use("sass-resources-loader").loader("sass-resources-loader").options({// Provide path to the file with resourcesresources: ["./public/css/common.less", "./public/css/variable.less"]}).end();});} };

axure封裝request.js 部分

const service = axios.create({baseURL: require("#/config").ip.key,timeout: 5000, // request timeoutwithCredentials: true, });

在單點登錄中，可以在router.js中判斷無權限跳轉時使用：
location.href = config.serverIP + “cas/login?redirect=” + url

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue使用process.env搭建自定义运行环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。