中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么在vue項目中添加多頁面配置

發布時間:2021-03-11 17:10:30 來源:億速云 閱讀:321 作者:Leah 欄目:web開發

怎么在vue項目中添加多頁面配置?針對這個問題,這篇文章詳細介紹了相對應的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

實現步驟

1.添加新增入口相關文件;
2.使用變量維護多入口;
3.開發環境讀取多入口配置;
4.生產環境讀取多入口配置;

新增入口相關文件

在 src 目錄下新增一個 page1 文件夾,新建新頁面的所需的相關文件(入口文件、HTML模板文件等)。我這邊直接 vue-cli 初始化創建相關文件復制了一份到 page1 文件夾下。如下:

├─App.vue
├─main.js
├─page1.html // 這里模板文件名稱需要與文件夾名稱相同,方便輸出模板讀取
├─router
|  └index.js
├─components
|   └HelloWorld.vue
├─assets
|  └logo.png
page1/router/index.js 需要對該頁面的所有路由添加同文件夾名的公共路徑,用于解析: 
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/page1/components/HelloWorld' // 這里也需要留意
Vue.use(Router)
export default new Router({
 mode: 'history',
 base: '/',
 routes: [
  {
   path: '/page1/',
   redirect: '/page1/index'
  },
  {
   path: '/page1/index',
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})

使用變量維護多入口

我們在項目目錄下的 build/utils.js 的最后 exports 一個指定多入口的對象。如下:

// 這里,每個屬性就是一個頁面配置,指定該頁面的入口文件
// 如果需要添加,只需多增加一個屬性
// 屬性名必和html模板文件名、目錄名稱相同
exports.multipleEntrys = {
 page1: './src/page1/main.js'
}

之所以使用 build/utils.js ,是因為該文件在 webpack.base.conf.js 、 webpack.prod.conf.js 、 webpack.dev.conf.js 都用導入。

開發環境讀取多入口配置

首先,在 build/webpack.base.conf.js 中,我們把上面定義的入口添加進 entry 配置:

entry: {
  app: './src/main.js',
  ...utils.multipleEntrys // entry添加該行
 }

然后,在 build/webpack.dev.conf.js 添加路徑解析和多頁面輸出:

// 添加解析,將historyApiFallback的屬性修改如下:
  historyApiFallback: {
   rewrites: [
    // 將所有多入口遍歷成路徑解析項
    ...((()=>{
     let writes = []
     for(let prop in utils.multipleEntrys){
      // 使用屬性名匹配為正則
      // 這就是上面“需要對該頁面的所有路由添加同文件夾名的公共路徑”的原因
      let reg = new RegExp(`^/${prop}/`) 
      writes.push({
       from: reg,
       // 使用屬性名讀取模板文件
       // 這就是上面“模板文件名稱需要與文件夾名稱相同”的原因
       to: path.posix.join(config.dev.assetsPublicPath, `${prop}.html`)
      })
     }
     return writes
    })()),
    // 匹配所有路徑一定要在最后,否則該匹配之后的項,不會被執行
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') } 
   ],
  }
// 在已經的HtmlWebpackPlugin中添加chunks配置,否則默認頁面會注入所有頁面的js文件
...
plugins: [
  ...
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true,
   // 增加此行,
   // 'app'為默認入口名稱,如果你的默認入口不是'app'
   // 則這里需要替換
   chunks: ['manifest', 'vendor', 'app']
  })
  ...
]
...
// 在`devWebpackConfig`定義之后,緊接著添加多頁面輸出:
for(let prop in utils.multipleEntrys){
 devWebpackConfig.plugins.push(new HtmlWebpackPlugin({
  filename: `${prop}.html`,
  // html模板路徑,使用屬性名作為文件夾名稱
  // 這是新頁面文件夾名稱需要和多入口配置變量屬性名相同的原因
  template: `./src/${prop}/${prop}.html`, 
  inject: true,
  chunks: ['manifest', 'vendor', prop],
 }))
}

最后,添加多頁面相互跳轉鏈接:

<!-- src/components/HelloWorld.vue -->
...
<a href="/page1/index" rel="external nofollow" >to page B</a> 
...

<!-- src/page1/components/HelloWorld.vue -->
...
<a href="/" rel="external nofollow" >to page A</a> 
...
<!-- 這里由于是多個頁面的跳轉,所以不能再使用router-link標簽,需要使用a標簽 -->

到這里,開發環境的多頁面配置已經完成,重新 npm run dev 一下,即可多頁面跳轉。

生產環境讀取多入口配置

首先,在 webapck.prod.config.js 中添加多頁面輸出。

// 在已經的HtmlWebpackPlugin中添加chunks配置,否則默認頁面會注入所有頁面的js文件
...
plugins: [
  ...
  new HtmlWebpackPlugin({
   ...
   chunks: ['manifest', 'vendor', 'app'] // 增加此行
   ...
  })
  ...
]
...
// build/webapck.prod.config.js的webpackConfig定義后緊接著添加
for(let prop in utils.multipleEntrys){
 webpackConfig.plugins.push(new HtmlWebpackPlugin({
  filename: `${prop}.html`,
  template: `./src/${prop}/${prop}.html`,
  inject: true,
  chunks: ['manifest', 'vendor', prop],
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
 }))
}

然后,開發環境不同路徑指向不同輸出文件是由 historyApiFallback 來處理的,生產就需要在 web服務 中將不同路徑指向打包后的不同文件。這里以 nginx 為例,配置如下:

server {
  listen    92 default_server;
  listen    [::]:92 default_server;
  server_name _;
  root     D:\vue-multi-entry\dist;
  location / {
      try_files $uri $uri/ /index.html;
  }
  location /page1/ {
      try_files $uri $uri/ /page1.html;
  }
}

關于怎么在vue項目中添加多頁面配置問題的解答就分享到這里了,希望以上內容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關注億速云行業資訊頻道了解更多相關知識。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

长春市| 汝阳县| 新乡市| 沅江市| 三亚市| 临漳县| 鸡泽县| 八宿县| 靖西县| 九江市| 微博| 邓州市| 吐鲁番市| 宣汉县| 江北区| 抚远县| 石景山区| 东安县| 千阳县| 南京市| 吉首市| 松江区| 锡林浩特市| 榆社县| 桐城市| 浏阳市| 攀枝花市| 特克斯县| 无棣县| 漳浦县| 金乡县| 阿鲁科尔沁旗| 松滋市| 武夷山市| 霍山县| 青海省| 瑞丽市| 三河市| 监利县| 金塔县| 富裕县|