Merry

# Vue多页面应用配置

最近由于工作驱动，项目包含pc端及mobile端，pc端和mobile端核心功能一致，最大的不同是UI,为了减少维护的成本，决定使用Vue的多页面开发。

项目线上部署在一个子目录下，为了解决在本地和线上路径保持一致，需要修改一些配置。所以以此篇文章来记录一下配置过程中的问题。

这里是我放在github上的项目，里面有整个配置文件。感兴趣的朋友可以参考一下：vue-multiple-page (opens new window)

此篇文章记录了先在根路径下的多页面配置，再从根路径修改成子路径的配置

# 准备工作

vue脚手架vue-cli3及以上； 在本地用vue-cli新建一个项目；

# 目录结构大致如下

|- public
|- src
|  |--assets
|  |--components
|  |--pages
|  |  |--index
|  |  |  |--index.html
|  |  |  |--index.js
|  |  |  |--App.vue
|  |  |  |--Home.vue
|  |  |  |--About.vue
|  |  |--mobile
|  |  |  |--mobile.html
|  |  |  |--index.js
|  |  |  |--mobile.vue
|  |  |  |--Home.vue
|  |  |  |--About.vue
|  |--router  
|  |  |--index.js
|  |  |--mobile.js
| - vue.config.js
| - package.json

# 在根路径配置多页面应用

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上, 例如 https://www.my-app.com/

# 实现的效果

  • 本地路径如下：
 // pc端
index: localhost:8080
// mobile端
mobile:location:8080/mobile
  • 不同页面，可以实现路由。如下：
// pc端的关于我们
localhost:8080/about 
 // mobile端的关于我们
localhost:8080/mobile/about 

# 修改配置

  • 修改 vue.config.js 配置
module.exports = {
 pages: {
    index: {
      entry: 'src/pages/index/index.js',
      template: 'src/pages/index/index.html',
      filename: 'index.html',
    },
    mobile: {
      entry: 'src/pages/mobile/index.js',
      template: 'src/pages/mobile/mobile.html',
      filename: 'mobile.html'
    },
  },
}

// mobile.js
import Router from 'vue-router'
import Home from 'mobile/views/Editor.vue'


export default new Router({
  mode: 'history',
  base: '/mobile',
  routes: [
    ...
  ]
})

vue3.js:路由配置修改的是history: createWebHistory('/mobile/')

# 在子路径下配置多页面应用

如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

# 实现效果

  • 本地路径访问如下：
// pc端
localhost:8080/e/
// mobile端
localhost:8080/e/mobile/
  • 不同页面，可以实现路由。如下：
// pc端的关于我们
localhost:8080/e/about 
 // mobile端的关于我们
localhost:8080/e/mobile/about 

# 修改配置

  • 修改vue.config.js
module.exports = {
  publicPath:'/e/',
  pages: {
    index: {
      entry: 'src/pages/index/index.js',
      template: 'src/pages/index/index.html',
      filename: 'index.html',
    },
    'e/mobile': {
      entry: 'src/pages/mobile/index.js',
      template: 'src/pages/mobile/mobile.html',
      filename: 'mobile.html'
    },
  },
}
  • 修改路由文件 pc端的：index.js 添加base:'/e/'
import Router from 'vue-router'
import Home from '../pages/pc/views/Editor.vue'


export default new Router({
  mode: 'history',
  // 添加base
  base: '/e/',
  routes: [
    {
      path: '/',
      name: 'index',
      component: Home
    }
  ]
})

vue3.js:路由配置修改的是history: createWebHistory('/e/')

mobile端mobile.js的base修改成base: '/e/mobile'

import Router from 'vue-router'
import Home from 'mobile/views/Editor.vue'

export default new Router({
  mode: 'history',
  base: '/e/mobile/',
  routes: [
    {
      path: '/',
      name: 'index',
      component: Home
    },
  ]
})

vue3.js:路由配置修改的是history: createWebHistory('/e/mobile')

特别注意的地方

  • 将pages下的key为mobile修改成e/mobile;如果不修改，不能进入到对应的mobile入口。

  • public下的资源，如果在根路径下访问路径是/img/xxx.jpg，在子路径下需要修改成/e/img/xxx.jpg

← Babel →