我們平常用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項目還沒有一些相關的依賴,這個時候需要進入到該文件夾里面,輸入指令:
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: { app: './src/main.js', one: './src/js/one.js', two: './src/js/two.js' },
注意,紫色部分的變量名要起好,因為后面要用到,以防忘記。
接下來就是對開發環境run dev里進行修改,打開\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那里與之對應的變量名。chunks的作用是每次編譯、運行時每一個入口都會對應一個entry,如果沒寫則引入所有頁面的資源。
之后就對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({ 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,每個頁面都要配置一個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> <div id="one"> {{msg}} </div> </template> <script> export default { name: 'one', data () { return { msg: 'I am one' } } } </script>
two的寫法與之類似,所以不寫下來了,
然后App.vue里通過這樣寫:
<template> <div id="app"> <a href="one.html">one</a><br> <a href="two.html">two</a><br> {{msg}} </div> </template>
這樣子當你打開頁面的時候,點擊上面one的鏈接就會跳轉到one.html,點擊two就跳轉到two.html。這樣子就大功告成了。