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

資訊專(zhuān)欄INFORMATION COLUMN

vue實(shí)現(xiàn)分環(huán)境打包步驟（給不同的環(huán)境配置相對(duì)應(yīng)的打包命令）

idealcn / 2221人閱讀

在新建好的項(xiàng)目中，一般執(zhí)行npm run build就是打包了，但此時(shí)只能打包到一個(gè)環(huán)境，不同環(huán)境需要配置不同的地址，可以手動(dòng)更改接口的地址，也可以自行配置命令而不需要每次打包進(jìn)行地址切換，步驟如下：
文件結(jié)構(gòu)如下圖：

1）在config文件內(nèi)新建test.env.js文件：

"use strict"
module.exports = {
   NODE_ENV: ""testing"",
   ENV_CONFIG:""test""
}

2）修改config內(nèi)的prod.env.js文件：

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

3）對(duì)build中webpack.prod.conf.js做如下修改：

// const env = require("../config/prod.env")  //原始代碼

或者為

// const env = process.env.NODE_ENV === "testing"  //原始代碼
//   ? require("../config/test.env")
//   : require("../config/prod.env")
// console.log(process.env.NODE_ENV);

修改為：

const env = config.build[process.env.env_config+"Env"]

4）config中的index.js 文件中build部分代碼修改如下：

build: {
   prodEnv: require("./prod.env"),
   testEnv: require("./test.env"),
   // Template for index.html
   index: path.resolve(__dirname, "../dist/index.html"),
  // ····余下的代碼就不寫(xiě)了
}

5）確認(rèn)安裝cross-env

npm install cross-env –save-dev

6）對(duì)build文件夾下的build.js的修改：

"use strict"
require("./check-versions")()

// process.env.NODE_ENV = "production"   //注釋掉

const ora = require("ora")
const rm = require("rimraf")
const path = require("path")
const chalk = require("chalk")
const webpack = require("webpack")
const config = require("../config")
const webpackConfig = require("./webpack.prod.conf")

// const spinner = ora("building for production...")   //注釋掉
var spinner = ora("building for " + process.env.NODE_ENV + " of " + process.env.env_config+ " mode..." )

spinner.start()

7）修改package.json文件（在script里面添加）：

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "e2e": "node test/e2e/runner.js",
  "test": "npm run unit && npm run e2e",
  "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
  "build": "node build/build.js",
  "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
  "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},

8）在common文件下新建env.js，對(duì)環(huán)境進(jìn)行判斷并切換，內(nèi)容如下：

/*
 * 配置編譯環(huán)境和線上環(huán)境之間的切換
 * baseUrl: 域名地址
 * routerMode: 路由模式
 */
let baseUrl = "";
let routerMode = "history";
let DEBUG = false;
let cancleHTTP = [];//取消請(qǐng)求頭設(shè)置；
//注：下面的baseUrl地址為假地址，只是模擬的，無(wú)法調(diào)通。
if (process.env.NODE_ENV == "development") {
   baseUrl = "https://10.248.65.100/GetTravelMethod";
   DEBUG = true;
}else if(process.env.NODE_ENV == "production"){
   baseUrl = "https://10.248.65.200/GetTravelMethod";
   DEBUG = false;
}else if(process.env.NODE_ENV == "testing"){
   baseUrl = "https://10.248.65.150/GetTravelMethod";
   DEBUG = false;
}

export{
   baseUrl,
   routerMode,
   DEBUG,
   ROLE,
   cancleHTTP
}

想要test環(huán)境下則運(yùn)行：

npm run build--test

相應(yīng)的改為production環(huán)境則運(yùn)行：

npm run build--prod

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

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

相關(guān)文章

  • vue-cli3 配置開(kāi)發(fā)-測(cè)試環(huán)境

    摘要：實(shí)現(xiàn)輸入一行命令，執(zhí)行兩條指令，分別打包線上生產(chǎn)環(huán)境和線上測(cè)試環(huán)境的代碼。這樣配置好之后，只要執(zhí)行，它會(huì)自動(dòng)先執(zhí)行正式環(huán)境構(gòu)建打包，完成之后再自動(dòng)執(zhí)行測(cè)試環(huán)境的構(gòu)建打包，是方便接著再配置自動(dòng)壓縮，這里就需要使用到一個(gè)的插件。 需求 首先介紹一下本項(xiàng)目的背景，是基于 vue-cli3.1.1 的單頁(yè)應(yīng)用，目前測(cè)試環(huán)境和生產(chǎn)環(huán)境都在線上，并且都在同一個(gè)域名下，其中生產(chǎn)環(huán)境部署在根目錄下，測(cè)...

    Scott 評(píng)論0 收藏0

  • 帶你了解webpack

    摘要：根據(jù)依賴(lài)關(guān)系，按照配置文件把模塊函數(shù)分組打包成若干個(gè)。會(huì)隨著自身的的修改，而發(fā)生變化。只需要在命令行運(yùn)行時(shí)帶上參數(shù)就搞定一些插件的廢除和替換廢棄了頂替者用屬性變化壓縮優(yōu)化代碼分割，下面詳解還有一些新的插件，。 1. 前端工程化項(xiàng)目打包歷史 前端工程化之前的時(shí)代略過(guò) 1. 半自動(dòng)執(zhí)行腳本來(lái)壓縮合并文件 自從xmlhttprequest被挖掘出來(lái)，網(wǎng)頁(yè)能夠和服務(wù)端通訊，js能做的事越來(lái)越多...

    senntyou 評(píng)論0 收藏0

  • 帶你了解webpack

    摘要：根據(jù)依賴(lài)關(guān)系，按照配置文件把模塊函數(shù)分組打包成若干個(gè)。會(huì)隨著自身的的修改，而發(fā)生變化。只需要在命令行運(yùn)行時(shí)帶上參數(shù)就搞定一些插件的廢除和替換廢棄了頂替者用屬性變化壓縮優(yōu)化代碼分割，下面詳解還有一些新的插件，。 1. 前端工程化項(xiàng)目打包歷史 前端工程化之前的時(shí)代略過(guò) 1. 半自動(dòng)執(zhí)行腳本來(lái)壓縮合并文件 自從xmlhttprequest被挖掘出來(lái)，網(wǎng)頁(yè)能夠和服務(wù)端通訊，js能做的事越來(lái)越多...

    Tamic 評(píng)論0 收藏0

  • 開(kāi)發(fā)運(yùn)維（一）vagrant

    摘要：成員可以在自己喜歡的桌面系統(tǒng)上開(kāi)發(fā)程序，代碼卻能統(tǒng)一在封裝好的環(huán)境里運(yùn)行，非常霸氣。打包分發(fā)當(dāng)你配置好開(kāi)發(fā)環(huán)境后，退出并關(guān)閉虛擬機(jī)。 博文參考 http://rmingwang.com/vagrant-commands-and-config.html https://www.vagrantup.com/docs/virtualbox/configuration.html https:/...

    FullStackDeveloper 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<