Question

我正在研究一个Vue.js项目，该项目正在本地开发中运行Webpack并构建用于部署的静态文件。

有一个变量apiDomain需要更改为：

http://localhost.api/-在本地开发中

到

https://api.example.com/-在静态构建文件中

我一直在努力弄清环境变量，但是我不确定它们在Webpack vs Vue.js中如何工作。

设置Vue.js变量的正确方法是什么，以便本地开发和静态构建文件之间有所不同？

Answer 1

您可以根据需要调整此想法：

fscanf

通过使用process.env.NODE_ENV（在开发和构建时可用），您不仅可以为应用程序服务端点设置正确的配置文件，还可以管理您在构建脚本中需要进行的任何调整：

import axios from "axios";

const env = process.env.NODE_ENV || "development";

console.log(`we are on [${env}] environment`);

const addr = {
  production: "https://rosetta-beer-store.io",
  development: "http://127.0.0.1:3000",
};

const api = axios.create({
  headers: {"x-api-key": "my-api-key", "x-secret-key": ""},
  baseURL: addr[env],
});

export const beerservice = {
  list: params => api.get("/beer/list", {params}),
  find: id => api.get(`/beer/${id}`),
};

export const mediaservice = {
  url: id => (id ? `${addr[env]}/media/${id}` : `${addr[env]}/icon.svg`),
};

您可以在this github project上看到更多示例，但总体思路是在构建时充分利用node

开发服务器与构建中的Vue.js + Webpack中的变量值不同

1 个答案: