vue大型项目拆分_vue-cli3单页构建大型项目方案

一、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&