vue cli3 automatically refresh the page content when saving the hot update + separate environment variables. env package.json configuration

A few days ago, ts + vue3.0 + view-design launched a project, and I always felt something was wrong. Today I finally realized that the hot update did not open.

Configure the following options in vue.config.js

const IS_PRO = ['production', 'test'].includes(process.env.NODE_ENV);

css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: IS_PRO,
        // 开启 CSS source maps  打包时不生成.map文件?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
        },
        // 为所有的 CSS 及其预处理文件开启 CSS Modules。
        // 这个选项不会影响 `*.vue` 文件。
        requireModuleExtension: true
    },

The process.env environment variable was used in the above, so here is a knowledge point in Amway
package.json

 "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "build:dev": "vue-cli-service build --mode development",
        "lint": "vue-cli-service lint"
    },

Environment variable storage address

Priority.env <.env.any <.env.any.local (.local files will be ignored by git)

npm run serve will find .env.development file configuration by
default npm run build will find .env.production file configuration by default

Of course, we can put the local configuration in .local for local configuration, and then put different files on the corresponding online and test environment. When packaging and going online, the corresponding npm run build-file name is just like npm run build- development

Vue-cli environment variable address