我們平常用vue開(kāi)發(fā)的時(shí)候總覺(jué)得vue好像就是專門為了單頁(yè)面應(yīng)用而誕生的，其實(shí)不是。因?yàn)関ue在工程化開(kāi)發(fā)的時(shí)候很依賴webpack，而webpack是將所有的資源整合到一塊，弄成一個(gè)單頁(yè)面。但是vue不止可以做單頁(yè)面，它還可以做多頁(yè)面，如果要做多頁(yè)面的話需要對(duì)他的依賴，也就是webpack就是重新配置才可以。本文將詳細(xì)講webpack的配置。
vue的開(kāi)發(fā)有兩種，一種是直接的在script標(biāo)簽里引入vue.js文件即可，這樣子引入的話個(gè)人感覺(jué)做小型的多頁(yè)面會(huì)比較舒坦，一旦做大型一點(diǎn)的項(xiàng)目，還是離不開(kāi)webpack。所以另一種方法也就是基于webpack和vue-cli的工程化開(kāi)發(fā)。下面詳解步驟。
先聲明，如果用vue進(jìn)行工程化開(kāi)發(fā)，首先要有node.js，然后再下一個(gè)npm，不過(guò)一般新版的node都會(huì)有npm所以可以不用弄。指令是在命令行里輸入。首先第一步就是生成一個(gè)vue項(xiàng)目，用指令：
vue init webpack test
博主本人聲明的文件名為test，下載好后一路enter，之后便生成了一個(gè)vue項(xiàng)目，但是這個(gè)vue項(xiàng)目還沒(méi)有一些相關(guān)的依賴，這個(gè)時(shí)候需要進(jìn)入到該文件夾里面，輸入指令：
npm install
如果網(wǎng)速不好，則用cnpm install，效果一樣。略等幾分鐘后整個(gè)依賴便已經(jīng)下完，之后輸入指令：
npm run dev
則會(huì)自動(dòng)打開(kāi)一個(gè)界面，如果報(bào)錯(cuò)不能打開(kāi)網(wǎng)頁(yè)的話只有一種原因，那就端口占用，這個(gè)時(shí)候需要到/config/index.js目錄下改端口就行。
當(dāng)一個(gè)vue項(xiàng)目完成好所有的配置后，接下來(lái)就是我們的重點(diǎn)了，首先我們新新建幾個(gè)html文件，博主我新建了一個(gè)one.html和two.html，及其與之對(duì)應(yīng)的vue文件和js文件，文件目錄如下：
弄好之后我們進(jìn)入/build/webpack.base.conf.js目錄下，在module.exports的域里，找到entry，在那里配置添加多個(gè)入口：
entry: { app: './src/main.js', one: './src/js/one.js', two: './src/js/two.js'},注意，紫色部分的變量名要起好，因?yàn)楹竺嬉玫剑苑劳洝?br />
接下來(lái)就是對(duì)開(kāi)發(fā)環(huán)境run dev里進(jìn)行修改，打開(kāi)/build/webpack.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那里與之對(duì)應(yīng)的變量名。chunks的作用是每次編譯、運(yùn)行時(shí)每一個(gè)入口都會(huì)對(duì)應(yīng)一個(gè)entry，如果沒(méi)寫則引入所有頁(yè)面的資源。
之后就對(duì)run build也就是編譯環(huán)境進(jìn)行配置。首先打開(kāi)/config/index.js文件，在build里加入這個(gè)：
index: path.resolve(__dirname, '../dist/index.html'),one: path.resolve(__dirname, '../dist/one.html'),two: path.resolve(__dirname, '../dist/two.html'),
然后打開(kāi)/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引用的是/config/index.js里的build，每個(gè)頁(yè)面都要配置一個(gè)chunks，不然會(huì)加載所有頁(yè)面的資源。
然后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> <div id="one"> {{msg}} </div></template><script>export default { name: 'one', data () { return { msg: 'I am one' } }}</script>two的寫法與之類似，所以不寫下來(lái)了，
然后App.vue里通過(guò)這樣寫：
<template> <div id="app"> <a href="one.html" rel="external nofollow" >one</a><br> <a href="two.html" rel="external nofollow" >two</a><br> {{msg}} </div></template>這樣子當(dāng)你打開(kāi)頁(yè)面的時(shí)候，點(diǎn)擊上面one的鏈接就會(huì)跳轉(zhuǎn)到one.html，點(diǎn)擊two就跳轉(zhuǎn)到two.html。這樣子就大功告成了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
