I would like to ask Daniel to give us some guidance on the construction of vue-config configuration.

1. The project uses ivew-admin

2. The problem is that the js and css built in the script bulid:uat are not small files by chunk, but the js,css is chunk in build:production.

as shown in the figure:
bulid:uat
clipboard.png

build:production

clipboard.png

  1. the scripts for bulid:uat are: "build:uat": "cross-env NODE_ENV=uat vue-cli-service build",
    "build:production": "vue-cli-service build",

4.vue.config.js is configured as follows:

module.exports = {
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to "/my-app/"
  baseUrl: BASE_URL,
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

//  webpack
  configureWebpack: config => {
    let plugins = []
    // if (process.env.NODE_ENV !== "development") {
      config.plugins = [...config.plugins, ...plugins]
    // }
  },

  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src")) // key,value.set("@@", resolve("src/components"))
      .set("_c", resolve("src/components"))
      .set("_conf", resolve("config"))
  },
  // .map
  productionSourceMap: false,
  // axiosbaseUrl "" 
  // devServer: {
  //   proxy: "http://management-test2.tuhuanjk.com"
  // }
  devServer: {
    proxy: {
      "/api": {
        target: "",
        changeOrigin: true
      }
    }
  }


}

Please give me some guidance, the goal is to run bulid:uat, the same chunk,js and css files; thank you!

Feb.14,2022

chunk is just a file name. Do you mean that the code is not compressed in uat environment?


change the configuration item of bulid:uat to the same as that of build:production. There should be no problem. And process.env.NODE_ENV are all 'production'


the reason why this is the role of webpack and webpack plug-ins, production in addition to compression, is to extract public files, get rid of useless files, vondor.js is a public file, app.js is the first file to load the page, some of the other are dynamically loaded according to the user's trigger effect. You must know treeShaking,code spliting.

it is recommended that you take a look at

Previous: How to use the Linux command to add php code in batches under a line of code

Next: No error command in flask installation process under mac run flask, say command not found

Menu