import{_ as s,o as a,c as n,d as o}from"./app.0ed445b7.js";const C=JSON.parse('{"title":"\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/env.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/env.md"},l=o(`

\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF

package.json \u91CC\u7684 scripts \u914D\u7F6E serve stage build\uFF0C\u901A\u8FC7 --mode xxx \u6765\u6267\u884C\u4E0D\u540C\u73AF\u5883

\u901A\u8FC7 npm run serve \u542F\u52A8\u672C\u5730 , \u6267\u884C development
\u901A\u8FC7 npm run stage \u6253\u5305\u6D4B\u8BD5 , \u6267\u884C staging
\u901A\u8FC7 npm run build \u6253\u5305\u6B63\u5F0F , \u6267\u884C production

javascript

"scripts": {
  "serve": "vue-cli-service serve --open",
  "stage": "vue-cli-service build --mode staging",
  "build": "vue-cli-service build",
}

\u914D\u7F6E\u4ECB\u7ECD

\u2003\u2003\u4EE5 VUE_APP_ \u5F00\u5934\u7684\u53D8\u91CF\uFF0C\u5728\u4EE3\u7801\u4E2D\u53EF\u4EE5\u901A\u8FC7 process.env.VUE_APP_ \u8BBF\u95EE\u3002
\u2003\u2003\u6BD4\u5982,VUE_APP_ENV = 'development' \u901A\u8FC7process.env.VUE_APP_ENV \u8BBF\u95EE\u3002
\u2003\u2003\u9664\u4E86 VUE_APP_* \u53D8\u91CF\u4E4B\u5916\uFF0C\u5728\u4F60\u7684\u5E94\u7528\u4EE3\u7801\u4E2D\u59CB\u7EC8\u53EF\u7528\u7684\u8FD8\u6709\u4E24\u4E2A\u7279\u6B8A\u7684\u53D8\u91CFNODE_ENV \u548CBASE_URL

\u5728\u9879\u76EE\u6839\u76EE\u5F55\u4E2D\u65B0\u5EFA.env.*

.env.development \u672C\u5730\u5F00\u53D1\u73AF\u5883\u914D\u7F6E

bash

NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

.env.staging \u6D4B\u8BD5\u73AF\u5883\u914D\u7F6E

bash

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

.env.production \u6B63\u5F0F\u73AF\u5883\u914D\u7F6E

bash

 NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

\u8FD9\u91CC\u6211\u4EEC\u5E76\u6CA1\u6709\u5B9A\u4E49\u5F88\u591A\u53D8\u91CF\uFF0C\u53EA\u5B9A\u4E49\u4E86\u57FA\u7840\u7684 VUE_APP_ENV development staging production
\u53D8\u91CF\u6211\u4EEC\u7EDF\u4E00\u5728 src/config/env.*.js \u91CC\u8FDB\u884C\u7BA1\u7406\u3002

\u8FD9\u91CC\u6709\u4E2A\u95EE\u9898\uFF0C\u65E2\u7136\u8FD9\u91CC\u6709\u4E86\u6839\u636E\u4E0D\u540C\u73AF\u5883\u8BBE\u7F6E\u53D8\u91CF\u7684\u6587\u4EF6\uFF0C\u4E3A\u4EC0\u4E48\u8FD8\u8981\u53BB config \u4E0B\u65B0\u5EFA\u4E09\u4E2A\u5BF9\u5E94\u7684\u6587\u4EF6\u5462\uFF1F
\u4FEE\u6539\u8D77\u6765\u65B9\u4FBF\uFF0C\u4E0D\u9700 \u8981\u91CD\u542F\u9879\u76EE\uFF0C\u7B26\u5408\u5F00\u53D1\u4E60\u60EF\u3002

config/index.js

javascript

// \u6839\u636E\u73AF\u5883\u5F15\u5165\u4E0D\u540C\u914D\u7F6E process.env.NODE_ENV
const config = require("./env." + process.env.VUE_APP_ENV);
module.exports = config;

\u914D\u7F6E\u5BF9\u5E94\u73AF\u5883\u7684\u53D8\u91CF\uFF0C\u62FF\u672C\u5730\u73AF\u5883\u6587\u4EF6 env.development.js \u4E3E\u4F8B\uFF0C\u7528\u6237\u53EF\u4EE5\u6839\u636E\u9700\u6C42\u4FEE\u6539

javascript

// \u672C\u5730\u73AF\u5883\u914D\u7F6E
module.exports = {
  title: "vue-h5-template",
  baseUrl: "http://localhost:9018", // \u9879\u76EE\u5730\u5740
  baseApi: "https://test.xxx.com/api", // \u672C\u5730api\u8BF7\u6C42\u5730\u5740
  APPID: "xxx",
  APPSECRET: "xxx",
};

\u6839\u636E\u73AF\u5883\u4E0D\u540C\uFF0C\u53D8\u91CF\u5C31\u4F1A\u4E0D\u540C\u4E86

javascript

// \u6839\u636E\u73AF\u5883\u4E0D\u540C\u5F15\u5165\u4E0D\u540CbaseApi\u5730\u5740
import { baseApi } from "@/config";
console.log(baseApi);

`,21),e=[l];function c(t,r,D,y,F,i){return a(),n("div",null,e)}const A=s(p,[["render",c]]);export{C as __pageData,A as default};

\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF #

\u914D\u7F6E\u4ECB\u7ECD #

\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF

\u914D\u7F6E\u4ECB\u7ECD