vue多環(huán)境配置方案

劉德剛發(fā)布于2019-08-26 18:27 / 1155人閱讀

摘要：前言一般服務(wù)器分為本地環(huán)境，測(cè)試環(huán)境，正式環(huán)境如果每次都要修改配置就很麻煩，總結(jié)一下我使用的方法修改執(zhí)行命令修改文件的，在打包的時(shí)候執(zhí)行不同的命令，測(cè)試執(zhí)行那正式執(zhí)行這里用到了能跨平臺(tái)地設(shè)置及使用環(huán)境變量，使用

前言

一般服務(wù)器分為本地環(huán)境，測(cè)試環(huán)境，正式環(huán)境
如果每次都要修改配置就很麻煩，總結(jié)一下我使用的方法

vue-demo/
  |-build/
  |-config/
  |-dist/
  |-src/
     |-config/
         |-index.js
         |-dev.conf.js
         |-sit.conf.js
         |-prod.conf.js
  |-package.json
  |-index.html

修改執(zhí)行命令

修改package.json文件的scripts，在打包的時(shí)候執(zhí)行不同的命令，
測(cè)試執(zhí)行那npm run build:sit
正式執(zhí)行npm run build:prod
這里用到了cross-env能跨平臺(tái)地設(shè)置及使用環(huán)境變量，使用

npm install cross-env --save

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js"
  },

修改配置文件

修改vue項(xiàng)目下config文件夾里的dev.env.js和prod.env.js，添加sit.env.js文件，分別對(duì)應(yīng)本地，正式和測(cè)試的配置文件
這里需要強(qiáng)調(diào)一下，如果這幾個(gè)文件修改了一定要重新npm run dev一下

dev.env.js

"use strict"
module.exports = {
  NODE_ENV: ""development"",
  ENV_CONFIG: ""dev""
}

prod.env.js

"use strict"
module.exports = {
  NODE_ENV: ""production"",
  ENV_CONFIG: ""prod""
}

sit.env.js

"use strict"
module.exports = {
  NODE_ENV: ""production"",
  ENV_CONFIG: ""sit""
}

修改build下的webpack.prod.conf.js文件找到const env = require("../config/prod.env")
修改成const env = require("../config/" + process.env.env_config + ".env")

vue默認(rèn)是兩個(gè)配置，一個(gè)是dev,一個(gè)prod,修改webpack.prod.conf.js后就可以判斷是測(cè)試環(huán)境還是正式環(huán)境了

// const env = require("../config/prod.env")
const env = require("../config/" + process.env.env_config + ".env")

應(yīng)用

在src文件夾里新建config文件夾，里面新建index.js

index.js

"use strict"
// 根據(jù)環(huán)境引入不同配置 process.env.ENV_CONFIG  ex:dev.conf.js
const config = require("./" + process.env.ENV_CONFIG + ".conf")
module.exports = config

dev.conf.js，sit.conf.js，prod.conf.js三個(gè)文件夾里寫不同的配置

// 配置本地測(cè)試
module.exports = {
        /*     
        * action 七牛上傳地址
        * bucket 空間名
        * domain 回顯域名
        */
  qiniu: {
    action: "https://up.qiniup.com",
    bucket: "xxx",
    domain: "xxx"
  },
  // 接口地址配置
  baseURL: "https://localhost/api/v1"
}

最后
直接使用就可以了

import { qiniu } from "@/config/index.js"
console.log(qiniu.action)

稍后會(huì)將demo上傳到github上

關(guān)于我

您可以掃描添加下方的微信并備注 Sol 加交流群，給我提意見，交流學(xué)習(xí)。

如果對(duì)你有幫助送我一顆小星星（づ￣3￣）づ╭?～

轉(zhuǎn)載請(qǐng)聯(lián)系作者！

GPU云服務(wù)器云服務(wù)器 vue.js多頁面多租戶環(huán)境多線程環(huán)境測(cè)試環(huán)境方案

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110221.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

劉德剛

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Postman測(cè)試工具調(diào)試接口詳細(xì)教程【向后端發(fā)送Json數(shù)據(jù)并接收返回的Json結(jié)果】

閱讀 1248·2021-11-15 11:37
半月灣hmbcloud：洛杉磯CN2 GIA方案（DC5）機(jī)房，帶寬升級(jí)至200M起步，三網(wǎng)CN2

閱讀 2259·2021-09-30 09:55
換主機(jī)郵件資料怎么換-電腦換主機(jī)，如何才能保存原來的資料在新主機(jī)中？

閱讀 4534·2021-09-22 15:51
怎么刪除匿名主機(jī)-qq匿名回答怎么刪除？

閱讀 3755·2021-09-22 15:46
Bootstrap清除浮動(dòng)的實(shí)現(xiàn)原理

閱讀 2780·2019-08-30 15:52
vue.js 中使用（...）運(yùn)算符報(bào)錯(cuò)

閱讀 436·2019-08-29 16:20
css流程圖、步驟圖，流程線與環(huán)節(jié)分別實(shí)現(xiàn)，支持單環(huán)節(jié)、多環(huán)節(jié)情況。scss生成CSS

閱讀 2901·2019-08-29 15:12
vue多環(huán)境配置方案

閱讀 1156·2019-08-26 18:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

vue多環(huán)境配置方案

相關(guān)文章