如何在vue-cli项目中使用webpack分隔指定文件

Question

我有一个配置文件（config.js），该文件取决于两个文件：local.js（用于开发环境）和deploy.js（用于生产环境）。在run serve或run build之后，它将创建一些依赖于环境的配置。我使用它的方式如下：

<template>
</template>
<script>
import '@/assets/scripts/config.js'
</script>

我的config.js：

import local from '../../../config/local'
import deploy from '../../../config/deploy'
export default {
  apiBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.emergencyPort
      : local.corsDomain + ':' + local.emergencyPort,
  fileBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.emergencyPort
      : local.corsDomain + ':5000',
  dataBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.emergencyPort
      : 'http://localhost' + ':' + local.emergencyPort,
  vocApiPath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.sharePort
      : local.corsDomain + ':' + local.sharePort,
  visualBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.simulatorPort
      : local.corsDomain + ':' + local.simulatorPort,
  spotBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.samplePort
      : local.corsDomain + ':' + local.samplePort,
  shareBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.sharePort
      : local.corsDomain + ':' + local.sharePort,
  envBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.envPort
      : local.corsDomain + ':' + local.envPort,
  ep360BasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.ep360Port
      : local.corsDomain + ':' + local.ep360Port,
  defaultDivision: {
    province: deploy.defaultProvince ? deploy.defaultProvince : '浙江省',
    city: deploy.defaultCity ? deploy.defaultCity : '宁波市',
    area: deploy.defaultArea ? deploy.defaultArea : '鄞州区'
  }
}

但是在构建之后，这些配置将插入到一些块脚本中。我的目的地是：使用webpack分隔此配置文件，当run build时，它将成为HTML中的脚本标记插入。之后，我可以更改服务器中的一些配置，而无需重建我的项目

Answer 1

要具有单独的脚本标签无进行Webpack处理，应将其从src中取出，并将其移至public目录，然后将脚本标签添加到index.html。如果您以可作为全局对象使用的方式构造配置（例如document.myAppConfig），则无需执行import就可以访问配置值。

Edit：

如前所述，显示的配置文件取决于BUILD进程，并且不希望重新生成而不重建项目。但是，在构建后，最接近获得灵活性的方法是使用import()功能而不是ES6 import config from "config.js"模块格式。

如果您可以找到导入配置的方法，则此方法

config: () => import(/* webpackChunkName: "config" */ "./config.js")
这将生成一个单独的块，您以后可以独立编辑。

CAVEAT：

由于Web浏览器缓存资源，这将为用户带来问题。