一、vue-cli3单页面构建方案
1、在目标文件夹内执行
vue ui ; 一个ui版界面，用于创建vue项目；
2、打开router文件夹内的index，看情况配置router的模式，是默认的hash还是history？ps:个人推介history模式，因为内嵌如app的H5页面的话，有可能某些app是不允许页面上带有'#'的，而hash会在url上利用#来做路由转发。ps:history模式在发布到服务器上需要nginx配置一下。详情请自行百度。
const router = new VueRouter({ base: 'https://www.jb51.net/', mode: 'history', //还可设置为'hash'模式 routes })
3、在根目录新建vue.config.js，覆盖webpack配置，将如下内容copy到文件中，作为初始配置
// const webpack = require('webpack') module.exports = { lintOnSave: false, // 禁止eslint devServer: { open: true, // 构建完成自动打开浏览器 }, configureWebpack: { plugins: [ // 全局配置node_modules中的模块，使用时无需引入 new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "windows.jQuery": "jquery" }) ] }, // webpack 链接 API，用于生成和修改 webapck 配置 chainWebpack: (config) => { // 取消 chunks，每个页面只对应一个单独的 JS / CSS config.optimization.splitChunks({ cacheGroups: {} }); // config // .plugin('webpack-bundle-analyzer') // .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) }, pluginOptions: { } }
4、配置完这些后，npm run serve启动项目，会加载如下两个js
npm run serve
app.js：是所有单页面首次渲染都必须加载的js，内部合并了框架及js(如vue、vue-x、vue-router及非异步组件但引用了的node_modules中的模块)，及所有页面公用的模块。about.js：是每个页面独立的js，这个跟router中引用模块的方式有关。
具体详解如下：
1、
import Home from '../views/Home.vue'
这种引用方式引用页面模版组件，就不会出现about.js文件，因为属于同步模块，当前件建的js会被打包进app.js。但是此种随着页面的增多，公用的app.js会越来越大。看情况在app.js大小接受的前提下权衡使用；2、
const routes = [ { path: 'https://www.jb51.net/', name: 'Home', // component: Home component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue') // webpack的魔法注释，将拆分出的js命名为home }, { 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 { exportConfig = devHost } export default exportConfig
结束：之后只需要在接口api的js文件中引入此文件即可。发布时区分环境打包。
7、浅谈项目引入第三方插件方案
ps：原则：移动端单个js大小不超过200k；pc端单个js不超过400k；
1.vue模块化引入node_modules包插件：