手把手教你vue-cli单页到多页应用的方法

关于“手把手教你vue-cli单页到多页应用的方法”的完整攻略，我可以给你详细讲解一下。

1. 什么是vue-cli

Vue.js是一套构建用户界面的渐进式框架，是目前较为流行的前端框架之一。而vue-cli则是Vue.js的脚手架工具，帮助我们快速生成Vue.js项目基础架构，集成常见的开发配置和工具，大大提升了我们的开发效率。

2. 单页应用和多页应用的区别

单页应用(SPA)是指只有一个HTML页面的Web应用，页面的一些部分会在使用的时候动态更新或者重新加载，从而提供更好的用户体验。

多页应用(MPA)则是指有多个HTML页面的Web应用，每个页面有自己的URL地址，用户请求不同的页面时会重新刷新页面。

3. 将单页应用转化为多页应用

3.1 新建多页面的Webpack配置文件

在Vue CLI项目的根目录创建一个multi-page.config.js文件，用于多页应用的Webpack配置。在这个文件中我们需要做以下配置：

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

// 定义多页应用的页面入口文件
const entries = {
  page1: './src/page1/main.js',
  page2: './src/page2/main.js'
};

// 定义多页应用的HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlWebpackPluginArr = [];
Object.keys(entries).forEach(function (key) {
  htmlWebpackPluginArr.push(
    new HtmlWebpackPlugin({
      filename: key + '.html',
      chunks: [key],
      template: 'public/index.html',
      inject: true
    })
  );
});

module.exports = {
  entry: entries,

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name]/[name].js',
    publicPath: '/'
  },

  plugins: htmlWebpackPluginArr,

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: [
              'vue-style-loader',
              'css-loader',
              'postcss-loader'
            ],
            sass: [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ],
            scss: [
              'vue-style-loader',
              'css-loader',
              'postcss-loader',
              'sass-loader'
            ]
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, './src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    contentBase: './dist',
    open: true,
    hot: true
  },

  performance: {
    hints: false
  },

  devtool: '#eval-source-map'
};

其中，entries定义了多个页面的入口文件，HtmlWebpackPlugin则定义了多个页面的HTML文件。

3.2 修改package.json文件的scripts

我们只需要在原有的scripts命令中加入多页面配置文件的信息即可，如下所示：

"scripts": {
  "dev": "webpack-dev-server --inline --config build/webpack.dev.conf.js && webpack --watch --config multi-page.config.js --progress",
  "build": "node build/build.js",
  "lint": "eslint --ext .js,.vue src",
  "test": "npm run lint",
  "multi": "webpack --config multi-page.config.js"
},

3.3 修改文件路径

我们需要在public/index.html中手动添加指向其他html文件的链接，而我们在此之前需要将所有文件路径都修改一下（如果原路径为<img src="/static/bg.jpg">，我们需要修改为<img src="./static/bg.jpg">），这样路径才不会出错。

最后，我们在public/index.html页面中加入以下代码，用于链接到多页应用的其他页面：

<a href="./page1.html">page1</a>
<a href="./page2.html">page2</a>

3.4 运行

使用npm run multi命令运行Webpack，生成多页应用的构建文件。之后我们就可以愉快地在浏览器中访问多页应用页面了。

4. 示例

下面，我们通过两个简单的示例来说明如何将单页应用转化为多页应用。

4.1 示例一

新建一个Vue CLI项目，选择默认的单页应用模板。在根目录下新建multi-page.config.js文件，并复制上述代码。之后，在./src目录下新建两个目录page1和page2。将./src/main.js复制为./src/page1/main.js和./src/page2/main.js。在./public目录下新建page1.html和page2.html，分别作为两个页面的入口文件。最后，使用npm run multi运行构建，即可得到一个多页应用。

4.2 示例二

还是以单页应用模板为基础，我们先创建两个组件，分别为Page1和Page2。在./src目录下新建两个目录page1和page2，并在其中创建新的Vue.js组件文件main.js，使用以下内容：

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

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

在page1和page2两个目录下，都创建index.html文件，内容分别为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>page1</title>
</head>
<body>
  <div id="app"></div>
  <script src="./main.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>page2</title>
</head>
<body>
  <div id="app"></div>
  <script src="./main.js"></script>
</body>
</html>

最后，修改public/index.html文件，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>single-page-app</title>
</head>
<body>
  <nav>
    <a href="./page1/index.html">page1</a>
    <a href="./page2/index.html">page2</a>
  </nav>
</body>
</html>

使用npm run multi进行构建，最终我们能得到一个基于Vue.js的多页应用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：手把手教你vue-cli单页到多页应用的方法 - Python技术站