如何用VUECLI3将单页应用修改成多页应用

2023-09-07 03:05:00

在vue3中,运行vue create的时候如果选择的是webpack模版,则默认是一个单页应用。我们要将其修改成多页应用的话,需要修改vue.config.js、title.js、public/index.html以及把每个单页应用下的router.js的mode改为hash模式。

修改vue.config.js

module.exports = {
  publicPath: '/',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: 8080,
    host: 'localhost',
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  },
  configureWebpack: {
    output: {
      filename: '[name].js',
      chunkFilename: '[name].js'
    }
  }
}

修改title.js

export default {
  'app-a': '应用A',
  'app-b': '应用B',
  'app-c': '应用C'
}

修改public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
</head>
<body>
  <div id="app"></div>
  <script src="./main.js"></script>
</body>
</html>

vue-cli-project
├── app-a
│   ├── main.js
│   ├── router.js
│   └── views
│       ├── App.vue
│       ├── Home.vue
├── app-b
│   ├── main.js
│   ├── router.js
│   └── views
│       ├── App.vue
│       ├── Home.vue
├── app-c
│   ├── main.js
│   ├── router.js
│   └── views
│       ├── App.vue
│       ├── Home.vue
├── node_modules
├── package-lock.json
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── main.js
│   ├── router.js
│   └── views
│       ├── About.vue
│       ├── Home.vue
└── vue.config.js

把每个单页应用下的router.js的mode改为hash模式

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

export default router

注意把原来的a…

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  base: process.env.BASE_URL,
  routes
})

export default router

…改成

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/app-a',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

export default router