這次帶給大家vue2.0怎麼開發多頁面，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
登入後複製
部落客本人聲明的檔案名稱為test，下載好後一路enter，之後便產生了一個vue項目，但是這個vue項目還沒有一些相關的依賴，這個時候需要進入到該資料夾裡面，輸入指令：
如果網速不好，則用cnpm install，效果一樣。略等幾分鐘後整個依賴便已經下完，之後輸入指令：
則會自動開啟一個介面，如果報錯不能開啟網頁的話只有一個原因，那就連接埠佔用，這個時候需要到/config/index.js目錄下改埠就行。
當一個vue專案完成好所有的配置後，接下來就是我們的重點了，首先我們新新建幾個html文件，博主我新建了一個one.html和two.html，及其與之對應的vue文件和js文件，文件目錄如下：
做好之後我們進入buildwebpack.base.conf.js目錄下，在module.exports的網域裡，找到entry，在那裡組態新增多個入口：
entry: {
app: './src/main.js',
one: './src/js/one.js',
two: './src/js/two.js'
},登入後複製
注意，紫色部分的變數名稱要起好，因為後面要用到，以防忘記。
接下來就是對開發環境run dev裡進行修改，打開buildwebpack.dev.conf.js文件，在module.exports那裡找到plugins，下面寫法如下：
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks: ['app']
}),
new HtmlWebpackPlugin({
filename: 'one.html',
template: 'one.html',
inject: true,
chunks: ['one']
}),
new HtmlWebpackPlugin({
filename: 'two.html',
template: 'two.html',
inject: true,
chunks: ['two']
}),
new FriendlyErrorsPlugin()
]登入後複製
在chunks那裡的app指的是webpack.base.conf.js的entry那裡與之對應的變數名稱。 chunks的作用是每次編譯、執行時每一個入口都會對應一個entry，如果沒寫則引入所有頁面的資源。
之後就對run build也就是編譯環境進行設定。先開啟configindex.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({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
filename: config.build.one,
template: 'one.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'one']
}),
new HtmlWebpackPlugin({
filename: config.build.two,
template: 'two.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'two']
}),登入後複製
其中filename引用的是configindex.js裡的build，每個頁面都要設定一個chunks，不然會載入所有頁面的資源。
然後one.js檔可以這樣寫：
import Vue from 'vue'
import one from './one.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#one',
render: h => h(one)
})
one.vue写法如下：
<template>
<p id="one">
{{msg}}
</p>
</template>
<script>
export default {
name: 'one',
data () {
return {
msg: 'I am one'
}
}
}
</script>登入後複製
two的寫法與之類似，所以不寫下來了，
然後App.vue裡透過這樣寫：
<template>
<p id="app">
<a href="one.html" rel="external nofollow" >one</a><br>
<a href="two.html" rel="external nofollow" >two</a><br>
{{msg}}
</p>
</template>登入後複製
這樣子當你打開頁面的時候，點擊上面one的連結就會跳到one.html，點擊two就跳到two.html。這樣子就大功告成了。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
建議閱讀：
JS提示文字方塊信箱位址補全
$.ajax()方法如何從伺服器取得json資料
以上是vue2.0怎麼開發多頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！
