Vue多頁面應(yīng)用配置

最近由于工作驅(qū)動(dòng)贷盲，項(xiàng)目包含pc端及mobile端，pc端和mobile端核心功能一致袁梗，最大的不同是UI,為了減少維護(hù)的成本觉吭，決定使用Vue的多頁面開發(fā)腾供。

項(xiàng)目線上部署在一個(gè)子目錄下，為了解決在本地和線上路徑保持一致鲜滩，需要修改一些配置伴鳖。所以以此篇文章來記錄一下配置過程中的問題。

這里是我放在github上的項(xiàng)目徙硅，里面有整個(gè)配置文件榜聂。感興趣的朋友可以參考一下：vue-multiple-page

此篇文章記錄了先在根路徑下的多頁面配置，再從根路徑修改成子路徑的配置

準(zhǔn)備工作

vue腳手架vue-cli3及以上闷游；
在本地用vue-cli新建一個(gè)項(xiàng)目峻汉；

目錄結(jié)構(gòu)大致如下

|- 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

在根路徑配置多頁面應(yīng)用

默認(rèn)情況下，Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上,
例如 https://www.my-app.com/

實(shí)現(xiàn)的效果

本地路徑如下：

 // pc端
index: localhost:8080
// mobile端
mobile:location:8080/mobile

不同頁面脐往，可以實(shí)現(xiàn)路由。如下：

// pc端的關(guān)于我們
localhost:8080/about 
 // mobile端的關(guān)于我們
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'
    },
  },
}

路由配置
pc端路由文件保持不變扳埂；
mobile端mobile.js 添加 base: '/mobile',

// 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/')

在子路徑下配置多頁面應(yīng)用

如果應(yīng)用被部署在一個(gè)子路徑上业簿，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑。例如阳懂，如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/梅尤，則設(shè)置 publicPath 為 /my-app/柜思。

實(shí)現(xiàn)效果

本地路徑訪問如下：

// pc端
localhost:8080/e/
// mobile端
localhost:8080/e/mobile/

不同頁面，可以實(shí)現(xiàn)路由巷燥。如下：

// pc端的關(guān)于我們
localhost:8080/e/about 
 // mobile端的關(guān)于我們
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;如果不修改赡盘，不能進(jìn)入到對應(yīng)的mobile入口。
public下的資源缰揪，如果在根路徑下訪問路徑是/img/xxx.jpg陨享，在子路徑下需要修改成/e/img/xxx.jpg

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者