再此我先說明 我寫的這個例子是乙個成熟的專案中直接加入的, 裡面有好多配置都是配好的 , 但是這些都不重要,因為沒有太大的關係,進入正題~
我們平時開發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: ,
第二步:
對開發環境run dev裡進行修改，開啟\build\webpack.dev.conf.js檔案，在module.exports那裡找到plugins，下面寫法如下：
new htmlwebpackplugin(),
new htmlwebpackplugin(),
new htmlwebpackplugin(),
第三步:
對run build也就是編譯環境進行配置。首先開啟\config\index.js檔案，在build裡加入這個：
index: path.resolve(__dirname, '../dist/index.html'),
one: path.resolve(__dirname, '../dist/one.html'),
two: path.resolve(__dirname, '../dist/two.html'),
這裡也就是打包之後dist資料夾中形成的 html
第四步:
開啟/build/webpack.prod.conf.js檔案，在 plugins 那裡找到 htmlwebpackplugin，然後新增如下**：
其實複製貼上改吧改吧就能用
new htmlwebpackplugin(,
chunkssortmode: 'dependency',
//(在這裡和你上面chunks裡面的名稱對應)
}),new htmlwebpackplugin(,
chunkssortmode: 'dependency',
chunks: ['manifest', 'vendor', 'one']
}),
其中filename引用的是\config\index.js裡的build，每個頁面都要配置乙個chunks，不然會載入所有頁面的資源。
上面的操作完成之後進行下面的傻瓜式操作 對咱們建立的檔案進行碼**
one.js檔案可以這樣寫：
import vue from 'vue'
import one from './one.vue'
vue.config.productiontip = false
/* eslint-disable no-new */
new vue()
one.vue寫法如下：
}
主要步驟我寫完了,咱們試試打包檔案 輸入npm run build打包檔案
在這裡插入描述
沒有問題, 跑一下專案看看npm run dev
在這裡插入描述
會報乙個錯,就是找不到檔案
少了一步,
在這裡插入描述
就是一定要在index.html的同級目錄下建立one.html 與 two.html
在這裡插入描述
專案跑起來了 點進去看看
在這裡插入描述
ok 完成!!!
vue 多頁面應用例子 vue 如何實現多頁面應用
其實我孤獨的像條狗 再此我先說明 我寫的這個例子是乙個成熟的專案中直接加入的,裡面有好多配置都是配好的 但是這些都不重要,因為沒有太大的關係,進入正題 我們平時開發 vue專案的時候,就有一種感覺就是 vue就像是專門為單頁應用而誕生的,因為人家的官方文件中也說了 在這裡插入描述 其實不是的,因為v...
多頁面應用 vue
vue框架 vue 解決前端大型應用的開發，將之前幾十個 幾百個 更多的html頁面，集成為1個html頁面 當頁面應用 jquery 前端方法庫。bootstrap ui元件庫。angular react 這兩個框架都比vue之前誕生，vue後來局上，佔比達到70 簡單 易用 整合了react和a...
vue多頁面開發
最外層有index.html，在src資料夾下，有pages資料夾分別包含content.html，info.html，此外你也可以擴充套件更多的page，這裡就不多贅述。那麼要怎麼修改配置檔案，實現多頁面功能呢？1.修改打包入口檔案位址 在build資料夾下，webpack.base.conf.j...