vue+webpack app中生产和开发的不同环境文件
Different environment files for production and development in vue+webpack app
我正在使用 webpack 构建一个 vue 应用程序。现在我必须将应用程序部署到生产服务器,我觉得需要为开发和生产案例设置不同的设置(例如,应用程序必须达到 api 服务更改的主要 url 每个类型)。在阅读了一些指南后,我还不清楚如何实现这一目标。
我想做的是当我 运行:
npm run dev
应该使用development.env中的环境变量,当我运行:
npm run build
应使用 production.env 中的环境变量。
是否可以使用 webpack 完成此操作?
干杯。
你可以使用 webpack-cli 并且 --env
允许你根据需要传递 manu 环境变量。
在你的构建脚本中传递这个:
--env.PLATFORM=production
例如,在 webpack 配置中的任何地方,你需要转换为 module.exports
到一个函数:
module.exports = env => {
if (env.PLATFORM === 'production') {
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
}
但对于生产和开发,我建议制作不同的 webpack 配置文件:
webpack.prod.config.js
webpack.dev.config.js
稍后您可以在构建脚本中传递 --config webpack.prod.config.js
。通常用于 env
在 webpack 中合并针对不同环境的 webpack 配置的不同部分
我正在使用 webpack 构建一个 vue 应用程序。现在我必须将应用程序部署到生产服务器,我觉得需要为开发和生产案例设置不同的设置(例如,应用程序必须达到 api 服务更改的主要 url 每个类型)。在阅读了一些指南后,我还不清楚如何实现这一目标。
我想做的是当我 运行:
npm run dev
应该使用development.env中的环境变量,当我运行:
npm run build
应使用 production.env 中的环境变量。
是否可以使用 webpack 完成此操作?
干杯。
你可以使用 webpack-cli 并且 --env
允许你根据需要传递 manu 环境变量。
在你的构建脚本中传递这个:
--env.PLATFORM=production
例如,在 webpack 配置中的任何地方,你需要转换为 module.exports
到一个函数:
module.exports = env => {
if (env.PLATFORM === 'production') {
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
}
但对于生产和开发,我建议制作不同的 webpack 配置文件:
webpack.prod.config.js
webpack.dev.config.js
稍后您可以在构建脚本中传递 --config webpack.prod.config.js
。通常用于 env
在 webpack 中合并针对不同环境的 webpack 配置的不同部分