基于vue cli重构多页面脚手架过程详解

下面我将为你详细讲解“基于vue-cli重构多页面脚手架过程详解”的完整攻略。

一、背景和意义

在日常开发中，使用多页面开发的情况比较常见，但是现有的脚手架不一定完全支持多页面开发。因此，我们需要对现有的多页面脚手架进行重构，以适应开发需求。本攻略就是基于Vue CLI对多页面脚手架进行重构的具体过程。

二、多页面脚手架原理

多页面脚手架就是将每个页面都单独打包成一个HTML文件的项目。这样可以避免不必要的代码冗余，并且可以方便快速地进行页面的增删改。

具体实现原理是通过html-webpack-plugin插件，在Webpack打包时向模板中注入生成的JS、CSS等文件，并输出HTML文件。

三、基于vue-cli搭建多页面脚手架

安装Vue CLI

首先，我们需要安装Vue CLI，用于创建Vue项目和管理依赖。具体命令如下：

npm install -g @vue/cli

创建Vue项目

创建Vue项目时，需要选择多页面模式。输入以下命令：

vue create my-project

在命令行交互界面中，选择 Manually select features，然后选择 Babel 和 Router，最后选择 Vue version 2.x。

接着，根据提示选择 In dedicated config files，并选择 Yes。

最后，选择 Pick a CSS pre-processor (Less、Sass、Stylus)，并根据自己的喜好选择一种CSS预处理器即可。

配置页面入口

在 src 目录下新建一个 pages 文件夹，用于保存页面文件。每个页面都需要一个 .js 和 .html 文件。以 index 页面为例，文件结构如下：

- src
    - pages
        - index
            - index.js
            - index.html

在 index.js 文件中写入以下代码：

import Vue from 'vue'
import App from './App.vue'

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

在 index.html 文件中写入以下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Index Page</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

注意，在 index.html 文件中需要有一个 id 为 app 的 div 标签。

配置Webpack

在Vue CLI中，Webpack的配置文件隐藏在node_modules中，我们需要使用 vue.config.js 文件进行自定义配置。

在项目根目录下创建一个 vue.config.js 文件，写入以下代码：

const path = require('path')
const glob = require('glob')

function resolve (dir) {
  return path.join(__dirname, dir)
}

function getEntry () {
  const entry = {}
  glob.sync('./src/pages/**/index.js').forEach(path => {
    const chunk = path.split('./src/pages/')[1].split('/index.js')[0]
    entry[chunk] = path
  })
  return entry
}

const pages = getEntry()

module.exports = {
  pages,
  chainWebpack: config => {
    Object.keys(pages).forEach(entryName => {
      config.plugins.delete(`html-${entryName}`)
      config.plugins.delete(`preload-${entryName}`)
      config.plugins.delete(`prefetch-${entryName}`)

      config.entry(entryName).add(pages[entryName]).end()

      config.plugin(`html-${entryName}`).use(HtmlWebpackPlugin, [{
        title: entryName,
        filename: `${entryName}.html`,
        template: `./src/pages/${entryName}/index.html`,
        chunks: ['chunk-vendors', 'chunk-common', entryName]
      }])
    })
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

以上代码的作用是：