如何解决在 Vue.js 中是否有一种方法可以使用一组不同的文件或功能进行构建,这些文件或功能可通过全局变量进行配置?
我希望能够基于预设的环境变量构建不同版本的 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';
使用 vue inspect --mode local > output.prod.js
获得的输出 webpack 配置看起来应该如此。任何这些尝试都会产生
未找到此相关模块:
- ./file_NODE_PRODUCT 路径中
如果这是不可能的,我还有什么其他方法可以让我对编译时包含在构建中的文件有类似程度的控制?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。