我希望能够基于预先设置的环境变量构建不同版本的 Vue.js 应用程序。动态组件对我来说不够强大,理想情况下是在编译时寻找一种方法来配置包含或排除构建中的任何项目文件。
我尝试使用 Webpack 定义插件。它似乎不允许我修改导入路径。
在 vue.config.js 中
chainWebpack: (config) => {
if (config.plugins.has('define')) {
const product = process.env.NODE_PRODUCT;
config
.plugin('define')
.tap((definitions) => {
definitions[0] = Object.assign(definitions[0], {
NODE_PRODUCT: '"featureOne"',
});
return definitions;
});
}
在应用程序中
import feature from './file_NODE_PRODUCT';
这没有解析为“./file_featureOne”。同样,在 .env 文件中使用 VUE_APP_PRODUCT 然后希望默认 Vue 内联 env 常量也不起作用。
import feature from './file_VUE_APP_PRODUCT';
获得的输出 webpack 配置vue inspect --mode local > output.prod.js
看起来应该是这样。任何这些尝试都会产生
未找到此相关模块:
- ./file_NODE_PRODUCT 在路径中
如果这是不可能的,我还有什么其他方法可以让我在编译时对构建中包含的文件有类似程度的控制?