vue 多頁面應用例子 vue 如何實現多頁面應用

其實我孤獨的像條狗

再此我先說明我寫的這個例子是乙個成熟的專案中直接加入的, 裡面有好多配置都是配好的 , 但是這些都不重要,因為沒有太大的關係,進入正題~

我們平時開發 vue專案的時候,就有一種感覺就是 vue就像是專門為單頁應用而誕生的,因為人家的官方文件中也說了

在這裡插入描述

其實不是的,因為vue在工程化開發的時候依賴於 webpack ,而webpack是將所有的資源整合到一塊後形成乙個html檔案一堆 js檔案, 如果將vue實現多頁面應用,就需要對他的依賴進行重新配置,也就是修改webpack的配置檔案.

vue的開發有兩種，一種是直接的在script標籤裡引入vue.js檔案即可，這樣子引入的話個人感覺做小型的多頁面會比較舒坦，一旦做大型一點的專案，還是離不開webpack。所以另一種方法也就是基於webpack和vue-cli的工程化開發。下面詳解步驟。

首先第一步:

進入\build\webpack.base.conf.js目錄下，在module.exports的域裡，找到entry，在那裡配置新增多個入口：

// 檔案路徑更具自己的實際情況進行配置,我這僅是 demo

entry: }

export default {

name: 'one',

data () {

return {

msg: 'i am one'

tow 檔案中的**一樣我就不寫了

主要步驟我寫完了,咱們試試打包檔案輸入 npm run build 打包檔案

在這裡插入描述

沒有問題, 跑一下專案看看 npm run dev

在這裡插入描述

會報乙個錯,就是找不到檔案

少了一步,

在這裡插入描述

就是一定要在index.html的同級目錄下建立one.html 與 two.html

在這裡插入描述

專案跑起來了點進去看看

在這裡插入描述

ok 完成!!!

我的部落格: 李大玄