9. Vue MPA应用移植和升级为Vue3本文演示了如何把SPA项目改造成MPA，同时把vue2升级到了vue3，在升

上一篇文章介绍了如何把原生项目改造成SPA应用，现在需要改造成MPA项目。

MPA改造

webpack.config.js多入口配置

entry: {
    home: path.resolve(__dirname, '../src/mpa/home.js'),
    login: path.resolve(__dirname, '../src/mpa/login.js')
},
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: path.resolve(__dirname, '../public/home.html'),
  chunks: ['home']
}),
new HtmlWebpackPlugin({
  // 使用
  filename: 'login.html',
  template: path.resolve(__dirname, '../public/login.html'),
  chunks: ['login']
})

新建模板文件：public/home.html 和 public/login.html

// home.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

新建每个页面的入口文件 mpa/home.js, mps/login.js

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

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

tips: 多页引用就不需要vue-router进行跳转了

修改对应的Home.vue 和 Login.vue 相应逻辑即可

按照上面的步骤，就把SPA改造成了MPA项目。

vue2 升级到 vue3

升级vue对应的依赖包

// vue2依赖的版本号
"vue-loader": "^15.9.8"
"vue": "^2.6.14",
"vue-router": "^3.5.4"

// vue3依赖的版本号
"vue-loader": "^17.0.0",
"vue": "^3.2.36",
"vue-router": "^4.0.15"

修改webpack.config.js

// vue2
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// vue3
const { VueLoaderPlugin } = require('vue-loader')

修改入口文件

import { createApp } from 'vue'
import App from '../Home.vue'

createApp(App).mount('#app')