我正在开发一个 Vue.js 项目,该项目在本地开发中运行 Webpack 并构建用于部署的静态文件。
有一个变量 apiDomain
需要更改:
http://localhost.api/
- 在本地开发
到
https://api.example.com/
- 在静态构建文件中
我一直在努力了解环境变量,但我不确定它们在 Webpack 和 Vue.js 中的工作方式。
设置 Vue.js 变量的正确方法是什么,以便它在本地开发和静态构建文件之间有所不同?
最佳答案
您可以根据需要调整此想法:
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`),
};
通过使用 process.env.NODE_ENV(在开发和构建时可用),您不仅可以为应用服务端点设置正确的配置文件,还可以管理构建脚本所需的任何调整:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");
module.exports = {
mode: process.env.NODE_ENV || "development",
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.html$/,
loader: "html-loader"
},
{
test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
entry: "./src/main.jsx",
output: {
filename: "build.js",
path: path.resolve(__dirname, "dist")
},
devtool:
process.env.NODE_ENV == "development" ? "inline-source-map" : undefined,
devServer: {
contentBase: "./dist",
hot: true
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new HtmlWebpackPlugin({
template: "./index.html"
}),
new webpack.HotModuleReplacementPlugin()
]
};
您可以在 this github project 上查看更多示例,但总体思路是在构建时利用节点
关于vue.js - Vue.js 中的不同变量值 + 开发服务器与构建中的 Webpack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54585669/