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

Question

我有一个配置文件(config.js)，它依赖于两个文件:local.js(用于开发环境)和deploy.js(用于生产环境)。在run serve或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 : '鄞州区'
  }
}

但是在编译之后，这些配置将被插入到块-公共脚本中。

我的目的地是：

run build**.将这个配置文件从我的普通块拆分为一个单独的配置文件(假设它的名称是config.hash.js)，当时，它将成为中的脚本标记插入。之后，我可以在服务器中更改一些配置，当我设置了一些错误的配置**时，不需要重新构建我的项目。

更详细的：我的项目是一个多条目项目，几乎每个条目中都有导入config.js。我尝试了动态导入，正如@Arunmozhi所说，虽然配置块被分割，但由于data返回，我无法在Promise函数中获得配置。我正在尝试使用splitChunks来解决我的问题，但它没有起作用。

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
      }
    }
  }
}

Answer 1

要有一个单独的脚本标记而不需要进行webpack处理，您应该将它从src中取出并移动到public目录中，并将脚本标记添加到index.html中。如果您以这样的方式构造您的配置，使它可以作为全局对象(例如，document.myAppConfig)可用，那么您可以访问配置值，而不必执行import。

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

如果您能够找到一种方法来导入这样的配置

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

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

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