0

我有一个配置文件（config.js），它依赖于两个文件：local.js（用于开发环境）和 deploy.js（用于生产环境）。在run serveor之后run build，它会创建一些依赖环境的配置。我像下面这样使用它：

<template>
</template>
<script>
import config from '@/assets/scripts/config.js'
export default {
  data() {
     return {
       apiBasePath: config.apiBasePath
     }
  }
}
</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 : '鄞州区'
  }
}

但是在构建之后，这些配置将被插入到块通用脚本中。
我的目标是：
将此配置文件从我的公共块中拆分为一个（假设它的名称是 config.[hash].js），它将成为 HTML 时插入的脚本标记run build。之后，我可以更改服务器中的一些配置，并且当我设置一些错误的配置时不需要重新构建我的项目

更多细节：我的项目是一个多条目项目，每个条目中几乎都导入了config.js。我尝试了@Arunmozhi所说的动态导入，尽管配置块被拆分，但由于返回，我无法获取data函数中的配置。我试图用它来解决我的问题，但它没有用。PromisesplitChunks

optimization: {
  splitChunks: {
    cacheGroups: {
      myconfig: {
        test: module => {
          module
            .identifier()
            .split('/')
            .reduceRight(item => item)
            .indexOf('config') !== -1
        },
        name: 'myconfig',
        enforce: true,
        chunks: 'all',
        reuseExistingChunk: true,
        minChunks: 1,
        minSize: 0
      }
    }
  }
}
4

1 回答 1

1

要在不经过 webpack 处理的情况下拥有单独的脚本标签，您应该将src其public从index.html. 如果您以可用作全局对象（例如document.myAppConfig）的方式构建配置，那么您可以访问配置值而无需执行import.

编辑：正如评论的那样，显示的配置文件依赖于 BUILD 过程，并且不能在不重建项目的情况下重新生成。然而，最接近实现在构建后编辑配置的灵活性的方法是使用import()函数而不是 ES6import config from "config.js"模块格式。

如果你能找到像这样导入配置的方法

config: () => import(/* webpackChunkName: "config" */ "./config.js")

这将生成一个单独的块，您以后可以独立编辑它。

CAVEAT：由于 Web 浏览器缓存资源，这会给用户带来问题。

于 2019-11-07T02:08:47.540 回答