},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
这种引用方式就是异步引用模版组件，不会将当前组建的js打包进app.js，就不会出现1种的问题。因为只要没有加载到对应页面，就不会加载对应页面的js。对应页面的js会最为独立的js单独的动态引入，如同上图的about.js，在进入about页面时才会引入。
3、如果在main.js中引入的node_modules包，则会直接打包进app.js，这个逃不掉。
ps:最终结论，建议每个页面都异步引用页面模版。
5、每个页面如果引了node_mudules就会存在相对应的vendors-home.js，如果没引入node_mudules的话，每个页面按需组件就不会存在vendors-home.js这个文件，如下图：
6、区分本地、测试、线上环境
ps：官网提供一种方案，但是需要建立多个环境配置的配置文件，嫌麻烦，就不使用官方的方式，使用如下插件拆分环境：
cross-env：https://github.com/kentcdodds/cross-env
cnpm i cress-env --save-dev // 更改node环境变量插件之后在package.json中加入如下三行配置，即可区分本地、测试、线上环境
"scripts": {
"serve": "cross-env NODE_ENV=development vue-cli-service serve",
"test": "cross-env NODE_ENV=test vue-cli-service build",
"build": "cross-env NODE_ENV=production vue-cli-service build"
},在vue.config.js中执行如下代码即可打印出当前环境。
console.log(process.env.NODE_ENV)在src目录下新建config目录，进入目录，新建gateway.config.js文件用于配置不同环境接口host，代码如下：gateway.config.js文件内容如下：
// 开发环境地址(npm run serve)
const devHost = {
// 接口地址域名相关
baseApi: 'https://abc.com',}
// 测试环境地址(npm run test)
const testHost = {
// 接口地址域名相关
baseApi: 'https://abc.com',
}
// 线上环境地址(npm run build)
const proHost = {
// 接口地址域名相关
baseApi: 'https://abc1.com',
}
// 区分环境选择静态资源地址
const env = process.env.NODE_ENV
let exportConfig = ''
if (env === 'production') {
exportConfig = proHost
} else if (env === 'test') {
exportConfig = testHost
} else {
