国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

劉德剛 / 1133人閱讀

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

前言

一般服務(wù)器分為本地環(huán)境，測試環(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，在打包的時候執(zhí)行不同的命令，
測試執(zhí)行那npm run build:sit
正式執(zhí)行npm run build:prod
這里用到了cross-env能跨平臺地設(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項目下config文件夾里的dev.env.js和prod.env.js，添加sit.env.js文件，分別對應(yīng)本地，正式和測試的配置文件
這里需要強調(diào)一下，如果這幾個文件修改了一定要重新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)是兩個配置，一個是dev,一個prod,修改webpack.prod.conf.js后就可以判斷是測試環(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三個文件夾里寫不同的配置

// 配置本地測試
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)

稍后會將demo上傳到github上

關(guān)于我

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/110221.html

相關(guān)文章

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

    摘要：前端項目上線的時候不可避免的會考慮到不同的運行環(huán)境需要前端請求不同服務(wù)地址的問題方案一一般的情況下可以使用環(huán)境變量進行分環(huán)境打包開發(fā)環(huán)境繼續(xù)使用代理需要編譯的環(huán)境通過設(shè)置環(huán)境變量去控制打包過程最終生成適用于不同環(huán)境的前端資源有關(guān)環(huán)境 前端項目上線的時候 , 不可避免的會考慮到不同的運行環(huán)境需要前端請求不同服務(wù)地址的問題 方案一 : 一般的情況下 , 可以使用vue-cli-servi...

    zhouzhou 評論0 收藏0

  • vuecli3 vant rem 移動端框架方案

    摘要：描述基于適配方案封裝，構(gòu)建手機端模板腳手架幫你做好的配置有多環(huán)境開發(fā)封裝適配方案生產(chǎn)環(huán)境優(yōu)化首屏加速低版本瀏覽器兼容環(huán)境發(fā)布腳本可以上手直接寫代碼多環(huán)境開發(fā)之前寫過一個多環(huán)境的方案，是基于的多環(huán)境配置方案傳送門最近新的項目采用了開始了 描述 基于vue-cli3.0+webpack 4+vant ui + sass+ rem適配方案+axios封裝，構(gòu)建手機端模板腳手架 幫你做好的配置...

    since1986 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<