如何在vue-cli项目中使用webpack分隔指定文件 [英] How to separate a specified file using webpack in vue-cli project

问题描述

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

I have a config file (config.js), which depends on two files: local.js(for development environment) and deploy.js(for production environment). After run serve or run build, it will create some configurations rely on the environment. I used it like the following:

<template>
</template>
<script>
import config from '@/assets/scripts/config.js'
export default {
  data() {
     return {
       apiBasePath: config.apiBasePath
     }
  }
}
</script>

我的config.js:

My 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)，并且在run build时它将成为HTML中的脚本标记插入.之后，我可以更改服务器中的某些配置，并且在设置一些错误的配置时无需重建项目

But after buiding, these configurations will be insert in chunk-common scripts.
My destination is:
Split this config file from my common chunk as a single one(suppose its name is config.[hash].js) and it will become a script tag insert in HTML when run build. After that, I can change some configurations in server and needn't rebuild my project when I set some wrong configurations

更多详细信息:我的项目是一个多条目项目，几乎每个条目中都导入config.js.我尝试了@Arunmozhi所说的动态导入，尽管 config块被拆分了，但由于Promise返回，所以无法在data函数中获取配置.我正在尝试使用splitChunks解决我的问题，但这没有用.

More Detail: My project is a multiple-entries project, there is almost import the config.js in each entry. I tried the dynamic import as @Arunmozhi said, I can't get the configurations in the data function because of the Promise return although the config chunk is split. I'm trying to use splitChunks to solve my problems, but it didn't work.

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

推荐答案

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

To have a separate script tag without going through the webpack processing, you should take it out of the src and move it to the public directory and add the script tag to the index.html. If you structure your config in such a way that it is available as a global object (for e.g., document.myAppConfig), then you can access the config values without having to do an import.

如前所述，显示的配置文件取决于BUILD流程，不能期望在不重建项目的情况下重新生成.但是，构建后最接近实现灵活性的是使用import()函数而不是ES6 import config from "config.js"模块格式.

As commented, the config file that is shown is dependent on the BUILD process and can't be expected to be regenerated without rebuilding the project. However the closest one can get to achieving the flexibility of editing the configuration after building is to use the import() function instead of the ES6 import config from "config.js" module format.

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

If you can find a way to import the configuration like this

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

这将生成一个单独的块，您以后可以对其进行独立编辑.

this would generate a separate chunk that you can later edit independently.

注意::由于网络浏览器缓存资源，这会给用户带来麻烦.

CAVEAT: This would create problems for the users due to web browsers caching resources.

这篇关于如何在vue-cli项目中使用webpack分隔指定文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！