Configuring multi-environment vue-webpack, router-view on different routes using the same components of the business scenario does not trigger the problems created or mounted

Multiple Environments

vue-cli provides only default devand prodthe two environments. But in fact really positive development process will likely more than one sitor stageenvironment, the so-called pre-release testing environment and the environment. So we have to simply modify the code. It is actually very simple to set different environment variables

"build:prod": "NODE_ENV=production node build/build.js",
"build:sit": "NODE_ENV=sit node build/build.js",
复制代码

After determining the code itself, doing it wanted

var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv
复制代码

The new version of vue-cli also built webpack-bundle-analyzersomething of a module analysis, very easy to use. The method is also very simple to use, and as before the package can be a npm script.

//package.json
 "build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js"

//之后通过process.env.npm_config_report来判断是否来启用webpack-bundle-analyzer

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())

router-view

different router the same component vue. The real business scenario, this happens a lot. such as

 

I create and edit pages using the same component, by default when the two page switching does not trigger vue of created or mounted hooks, the official said that you can do through the process of change watch $ route, but in fact really it is quite troublesome. And later we find out that you can simply add a unique key on the router-view, to ensure the routing switch will trigger re-rendering the hook. In this way more simple.

 

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

 

Specific queries: https://juejin.im/post/59097cd7a22b9d0065fb61d2