一、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: '/',
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: '/',
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')
}
]