Vue.js Vue+；Webpack：将config.js从打包中排除，但不会加载_Vue.js_Webpack_Config

Vue.js Vue+；Webpack：将config.js从打包中排除，但不会加载

vue.js webpack

Vue.js Vue+；Webpack：将config.js从打包中排除，但不会加载,vue.js,webpack,config,Vue.js,Webpack,Config,我想要什么：在我的Vue项目中，当执行Vue运行构建时，所有内容都打包（网页包）到dist目录中我可以将整个包部署到测试服务器，但由于测试服务器需要另一组凭据（用于数据库等），因此每个环境中的一个文件，即config.js，必须不同我的策略：将config.js从打包到app.12314…js包中排除将config.js定义为以文件形式发出（通过网页包的文件加载器）我所做的：在需要配置数据的Vue组件文件中，通过以下方式包括配置： <script> import

我想要什么：

在我的Vue项目中，当执行

Vue运行构建

时，所有内容都打包（网页包）到

dist

目录中

我可以将整个包部署到测试服务器，但由于测试服务器需要另一组凭据（用于数据库等），因此每个环境中的一个文件，即

config.js

，必须不同

我的策略：

将
```
config.js
```
从打包到app.12314…js包中排除
将
```
config.js
```
定义为以文件形式发出（通过网页包的
```
文件加载器
```
）

我所做的：

在需要配置数据的Vue组件文件中，通过以下方式包括配置：

<script>
  import config from '@/config/config.js';
</script>

我的预期：

```
config.js
```
将作为普通文件发出，而非捆绑=>
```
dist
```
文件夹将包含一个捆绑的
```
app….js
```
文件和一个单独的
```
config.js
```
文件
我可以将
```
dist
```
文件夹的内容部署到测试服务器，生成的代码将充分负责加载
```
config.js
```
，以便组件可以使用配置数据

问题：

当然，

config.js

现在作为文件发出，因此我的

dist

文件夹如下所示：

const path = require("path");

// vue.config.js
module.exports = {
  publicPath: '/',
  configureWebpack: {
    module: {
      rules: [
        {
          test: /config.*config\.js$/,
          use: [
            {
              // exclude config file from being packed. The config file should simply reside as a plain file on the
              // file system, since it must be replaced with the target environoment specific config file on the server,
              // e.g. for setting the correct database connection
              loader: 'file-loader',
              options: {
                name: 'config/config.js'
              },
            }
          ]
        }
      ]
    }
  }
}

.
├── config
│   └── config.js
├── css
│   ├── app.eb377513.css
│   └── chunk-vendors.2da46af1.css
├── favicon.png
├── index.html
└── js
    ├── app.724607ed.js
    ├── app.724607ed.js.map
    ├── chunk-vendors.426dad42.js
    └── chunk-vendors.426dad42.js.map

如您所见，一个单独的文件

config.js

！所有其他JS代码都已绑定到

app.724607ed.JS

。到目前为止，一切顺利

但是，测试服务器上的应用程序不会加载

config.js

，因此尝试使用其中变量的每个组件都会失败

我注意到在Chrome的开发者工具中，

config.js

没有网络流量。显然，webpack代码并没有试图从文件系统中实际加载文件。我原以为这会自然而然地发生

我做错了什么，我错过了什么

这是从打包中排除配置文件的最佳实践吗

显然，Webpack的

文件加载器

会单独发出文件（好），但不会添加代码以在webapp中加载文件（坏）。我假设

文件加载器将负责在index.html
文件中插入正确的
标记，以便：

将加载单独发出的config.js
文件
在开发端，使用config.js
的语法与其他（打包）工件的语法相同，如下所示：

（在Vue组件文件中：）
步骤3：更改config.js
以与传统导入方法兼容（不带ES2015模块）
现在，commonJS语法不再可行，因为浏览器应该加载config.js
。我不知道如何将ES2015类型的模块加载（使用本机import
语法）与网页包代码（用网页包加载代码替换所有import
）混合使用。所以我决定切换到传统方法：让config.js
简单地注册一个全局（糟糕！）变量，就像以前一样：
var config = (() => {
    return {
        databaseCredentials: ...
    };
})();

因此，在每个使用配置设置的Vue模块中，调整“导入”代码-只需删除导入，因为变量config
将在全局范围内可用（在本步骤中config.js
中更改后）：
请注意，我们从不使用configDummy
引用（变量），这只是Webpack找到它，并将其规则应用于文件。这种情况下的规则是：在dist
文件夹中将其作为单独的文件发出（即生成dist/config/config.js
文件）
就这样！我们使用了Webpack的文件加载器
，这样config.js
就不会缩小并绑定到应用程序包中，而是作为一个单独的文件保存。此外，我们还负责通过index.html
加载它，这意味着配置设置是全局可用的
我不喜欢这个解决方案的一点是，对于这个特殊文件，import
方法的nice方法已经损坏。但我没有找到一个简单的解决方案，可以让Webpack处理这些事情
如果有人有建议，我会很高兴听到
2019年4月9日更新：不，这不是一个理想的解决方案。这适用于打包/部署（npm运行构建部分），但不适用于开发服务器（npm运行服务部分）。为了让开发服务器工作，我必须将config.js
复制到路径public/config/config.js
，以便开发服务器可以在index.html
告诉它的地方找到它，即config/config.js
（这是相对于index.html
文件解决的）
所以，再说一次：它是有效的，但有点笨拙。我不喜欢这个解决方案。
我所做的更简单：只需在配置中的entry
param中添加一个条目。例如：{entry:{app:'./src/main.js'，config:'./src/config/config.js'}}
。但是，我还没有找到如何通过优化.minifier将该文件从缩小中排除。。。
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.png">
    <script type="text/javascript" src="config/config.js" ></script> <-------- insert this line!
    <title>replayer-gui4</title>
</head>

var config = (() => {
    return {
        databaseCredentials: ...
    };
})();

<script>
    // import config from '@/config/config.js'; // <-- commented out - or just REMOVE this line
</script>

<script>
    import configDummy from '@/config/config.js';
</script>