Vue.js CLI 3 多页面构建与编译时优化指南

2023-10-21 15:03:53

前言

Vue.js CLI 3 是一个功能强大的工具，可帮助你快速构建 Vue.js 应用程序。它提供了许多有用的功能，包括脚手架生成项目、代码热重载、构建优化等。

一、Vue-Cli3多页面配置

1.1 安装 Vue-Cli3

npm install -g @vue/cli

1.2 创建多页面项目

vue create my-multi-page-project --multi

1.3 多页面目录结构

my-multi-page-project/
├── config
│   └── index.js
├── node_modules
├── package.json
├── package-lock.json
├── public
├── src
│   ├── App.vue
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── pages
│   │   ├── home
│   │   │   ├── Home.vue
│   │   │   └── index.js
│   │   ├── about
│   │   │   ├── About.vue
│   │   │   └── index.js
│   ├── router.js
└── vue.config.js

二、编译时构建优化

2.1 安装 DLLPlugin

npm install --save-dev webpack-dll-plugin

2.2 配置 DLLPlugin

在 vue.config.js 文件中添加如下配置：

const webpack = require('webpack')
const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.plugin('dll').use(webpack.DllPlugin, [{
      name: '[name]-dll',
      path: path.join(__dirname, 'dll', '[name]-manifest.json')
    }])
  }
}

2.3 构建公共代码块

npm run build:dll

2.4 配置多页面入口文件

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from './pages/home/index.js'
import About from './pages/about/index.js'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')