vue2 0多頁面開發

我們平常用vue開發的時候總覺得vue好像就是專門為了單頁面應用而誕生的，其實不是。因為vue在工程化開發的時候很依賴webpack，而webpack是將所有的資源整合到一塊，弄成乙個單頁面。但是vue不止可以做單頁面，它還可以做多頁面，如果要做多頁面的話需要對他的依賴，也就是webpack就是重新配置才可以。本文將詳細講webpack的配置。

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

先宣告，如果用vue進行工程化開發，首先要有node.js，然後再下乙個npm，不過一般新版的node都會有npm所以可以不用弄。指令是在命令列裡輸入。首先第一步就是生成乙個vue專案，用指令：

vue init webpack test

npm install

如果網速不好，則用cnpm install，效果一樣。略等幾分鐘後整個依賴便已經下完，之後輸入指令：

npm run dev

則會自動開啟乙個介面，如果報錯不能開啟網頁的話只有一種原因，那就埠占用，這個時候需要到/config/index.js目錄下改埠就行。

當乙個vue專案完成好所有的配置後，接下來就是我們的重點了，首先我們新新建幾個html檔案，博主我新建了乙個one.html和two.html，及其與之對應的vue檔案和js檔案，檔案目錄如下：

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

entry: ,

注意，紫色部分的變數名要起好，因為後面要用到，以防忘記。

接下來就是對開發環境run dev裡進行修改，開啟\build\webpack.dev.conf.js檔案，在module.exports那裡找到plugins，下面寫法如下：

plugins: [
newwebpack.defineplugin(),
//newwebpack.hotmodulereplacementplugin(),
newwebpack.noemitonerrorsplugin(),
//newhtmlwebpackplugin(),
newhtmlwebpackplugin(),
newhtmlwebpackplugin(),
newfriendlyerrorsplugin()
]

之後就對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'),

然後開啟/build/webpack.prod/conf.js檔案，在plugins那裡找到htmlwebpackplugin，然後新增如下**：

new
htmlwebpackplugin(,
//necessary to consistently work with multiple chunks via commonschunkplugin
chunkssortmode: 'dependency',
}),new
htmlwebpackplugin(,
chunkssortmode: 'dependency',
chunks: ['manifest', 'vendor', 'one']
}), 
newhtmlwebpackplugin(,
chunkssortmode: 'dependency',
chunks: ['manifest', 'vendor', 'two']
}),

其中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寫法如下：

<
template
>
<
div 
id="one"
>} 
div>
template
>
<
script
>
export 
default
}}script
>

two的寫法與之類似，所以不寫下來了，

<
template
>
<
div 
id>
<
a href
="one.html"
>one
a><
br>
<
a href
="two.html"
>two
a><
br>} 
div>
template
>

這樣子當你開啟頁面的時候，點選上面one的鏈結就會跳轉到one.html，點選two就跳轉到two.html。這樣子就大功告成了。

**《vue2.0之多頁面的開發》

vue2 0多頁面開發

Vue2 0 多入口配置

搭建Vue2 0開發環境

vue多頁面開發

vue2 0多頁面開發

Vue2 0 多入口配置

搭建Vue2 0開發環境

vue多頁面開發

相關推薦