基於webpack2.x的vue2.x的多頁面站點
vue的多頁面
依舊使用vue-cli來初始化咱們的項目css
而後修改主要目錄結構以下：html
├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── src │ ├── pages │ │ ├── boys │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── index.vue │ │ ├── goods │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── index.vue │ │ ├── index │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── index.vue │ │ └── sotho │ │ ├── index.html │ │ ├── index.js │ │ └── index.vue
編寫每一個頁面
能夠看到這裏咱們有4個單獨的頁面，分別是boys,goods,index,sothovue
首先看boys文件夾中的代碼:node
index.htmlwebpack
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
這個是咱們要單獨生成的頁面,最後也是生成index.htmlgit
index.vuegithub
<style scoped>
.boys {
background-color: red;
}
</style>
<template>
<div id="app" class="boys">
boys got many things.
</div>
</template>
<script>
export default {
name: 'boys'
}
</script>
這是咱們的vue文件，能夠當作一個組件，其實.vue文件你能夠當作一個語法糖，最終會被vue-loader編譯成js,生成對應的css,js,domweb
index.jsvue-cli
import Vue from 'vue'
import Index from './index.vue'
Vue.config.productionTip = false
new Vue({
el: '#app',
template: '<Index/>',
components: { Index }
})
這就是主要文件了，這裏執行vue的實例化，用法同在瀏覽器端頁面中直接引入vue.js文件同樣的含義npm
其餘幾個頁面同樣也是同理,具體能夠見:
- https://github.com/zhaoqize/vue-advance/tree/master/vue2-multiple
- https://git.oschina.net/zqzjszqzjs/vue2-x-multiple
修改webpack.config.js
因爲vue中的配置使用了模塊化管理，因此咱們須要修改下面兩個文件：
- webpack.base.conf.js
咱們須要修改webpack.base.conf.js的入口entry，這是配置多入口文件的重點！
若是不懂多入口含義的化，建議去看下webpack的文檔。
webpack.base.conf.js
...
module.exports = {
entry: {
'pages/boys/index': './src/pages/boys/index.js', //配置boys頁面入口
'pages/goods/index': './src/pages/goods/index.js', //配置goods頁面入口
'pages/index/index': './src/pages/index/index.js', //配置index頁面入口
'pages/sotho/index': './src/pages/sotho/index.js', //配置sotho頁面入口
},
...
- webpack.dev.conf.js
這裏咱們須要修改plugins，它是個強大的即插即用的拓展。
咱們使用html-webpack-plugin來生成咱們的對於的頁面。
...
var HtmlWebpackPlugin = require('html-webpack-plugin')
...
...
module.exports = merge(baseWebpackConfig, {
...
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
new HtmlWebpackPlugin({
filename:'./pages/boys/index.html', //指定生成的html存放路徑
template:'./src/pages/boys/index.html', //指定html模板路徑
inject: true, //是否將js等注入頁面,以及指定注入的位置'head'或'body'
chunks:['pages/boys/index'] //須要引入的chunk(模塊資源)，不配置就會引入全部頁面的資源(js/css),這是個很重要的屬性，你能夠不配置試試效果
}),
new HtmlWebpackPlugin({
filename:'./pages/goods/index.html',
template:'./src/pages/goods/index.html',
inject: true,
chunks:['pages/goods/index']
}),
new HtmlWebpackPlugin({
filename:'./pages/index/index.html',
template:'./src/pages/index/index.html',
inject: true,
chunks:['pages/index/index']
}),
new HtmlWebpackPlugin({
filename:'./pages/sotho/index.html',
template:'./src/pages/sotho/index.html',
inject: true,
chunks:['pages/sotho/index']
}),
...
]
})
以上就是咱們進行多頁開發的主要配置項。
開發環境訪問頁面
運行npm run dev,咱們看下怎麼訪問咱們的多頁vue應用。
- http://localhost:9090/pages/index/index.html 訪問index頁面
- http://localhost:9090/pages/boys/index.html 訪問boys頁面
- http://localhost:9090/pages/goods/index.html 訪問goods頁面
- http://localhost:9090/pages/sotho/index.html 訪問sotho頁面
再來看下咱們的dom結構是什麼樣：
頁面裏的js就是咱們經過插件注入的，而且咱們是經過指定chunks完成。
build
運行npm run build
➜ vue2-x-multiple git:(master) ✗ npm run build
> vue3@1.0.0 build /study/vue2-x-multiple
> node build/build.js
⠋ building for production...
Starting to optimize CSS...
Processing static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css...
Processing static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css...
Processing static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css...
Processing static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css...
Processed static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css, before: 114, after: 44, ratio: 38.6%
Processed static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css, before: 116, after: 46, ratio: 39.66%
Processed static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css, before: 92, after: 22, ratio: 23.91%
Processed static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css, before: 92, after: 22, ratio: 23.91%
Hash: 2467c91090ccf4690865
Version: webpack 2.5.1
Time: 6319ms
Asset Size Chunks Chunk Names
static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css.map 312 bytes 1 [emitted] pages/sotho/index
static/js/vendor.d7548891d04d4f883b29.js 83.2 kB 0 [emitted] vendor
static/js/pages/index/index.b2ce74f4155fb942a064.js 671 bytes 2 [emitted] pages/index/index
static/js/pages/goods/index.7d0dda2791db2d3b1500.js 702 bytes 3 [emitted] pages/goods/index
static/js/pages/boys/index.2c268b75ba9424211d79.js 699 bytes 4 [emitted] pages/boys/index
static/js/manifest.f466ccb58b3271558be5.js 1.57 kB 5 [emitted] manifest
static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css 44 bytes 4 [emitted] pages/boys/index
static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css 46 bytes 3 [emitted] pages/goods/index
static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css 22 bytes 2 [emitted] pages/index/index
static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css 22 bytes 1 [emitted] pages/sotho/index
static/js/vendor.d7548891d04d4f883b29.js.map 687 kB 0 [emitted] vendor
static/js/pages/sotho/index.e706490d7c42ad8e4f73.js.map 5.55 kB 1 [emitted] pages/sotho/index
static/js/pages/sotho/index.e706490d7c42ad8e4f73.js 674 bytes 1 [emitted] pages/sotho/index
static/js/pages/index/index.b2ce74f4155fb942a064.js.map 5.55 kB 2 [emitted] pages/index/index
static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css.map 312 bytes 2 [emitted] pages/index/index
static/js/pages/goods/index.7d0dda2791db2d3b1500.js.map 5.64 kB 3 [emitted] pages/goods/index
static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css.map 338 bytes 3 [emitted] pages/goods/index
static/js/pages/boys/index.2c268b75ba9424211d79.js.map 5.62 kB 4 [emitted] pages/boys/index
static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css.map 333 bytes 4 [emitted] pages/boys/index
static/js/manifest.f466ccb58b3271558be5.js.map 14.6 kB 5 [emitted] manifest
./pages/boys/index.html 386 bytes [emitted]
./pages/goods/index.html 389 bytes [emitted]
./pages/index/index.html 389 bytes [emitted]
./pages/sotho/index.html 389 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
進入dist目錄，查看生成的頁面
├── pages
│ ├── boys
│ │ └── index.html
│ ├── goods
│ │ └── index.html
│ ├── index
│ │ └── index.html
│ └── sotho
│ └── index.html
└── static
├── css
│ └── pages
│ ├── boys
│ │ ├── index.19ebbc80a1c187989dbf02d03192e84e.css
│ │ └── index.19ebbc80a1c187989dbf02d03192e84e.css.map
│ ├── goods
│ │ ├── index.fe8f1bc39f33dce4c4d610c2326482c6.css
│ │ └── index.fe8f1bc39f33dce4c4d610c2326482c6.css.map
│ ├── index
│ │ ├── index.f6340f14071a89cf2b092da280ffaf8c.css
│ │ └── index.f6340f14071a89cf2b092da280ffaf8c.css.map
│ └── sotho
│ ├── index.7415ffd3ef7b9d1a4398cba49927b12b.css
│ └── index.7415ffd3ef7b9d1a4398cba49927b12b.css.map
└── js
├── manifest.f466ccb58b3271558be5.js
├── manifest.f466ccb58b3271558be5.js.map
├── pages
│ ├── boys
│ │ ├── index.2c268b75ba9424211d79.js
│ │ └── index.2c268b75ba9424211d79.js.map
│ ├── goods
│ │ ├── index.7d0dda2791db2d3b1500.js
│ │ └── index.7d0dda2791db2d3b1500.js.map
│ ├── index
│ │ ├── index.b2ce74f4155fb942a064.js
│ │ └── index.b2ce74f4155fb942a064.js.map
│ └── sotho
│ ├── index.e706490d7c42ad8e4f73.js
│ └── index.e706490d7c42ad8e4f73.js.map
├── vendor.d7548891d04d4f883b29.js
└── vendor.d7548891d04d4f883b29.js.map
到此爲止，一個簡單的基於vue2.x的多頁應用完成了。
升級
webpack.base.conf.js中的entry入口都是手工寫入，若是頁面多的話這樣確定有問題。
因此咱們經過以下的方式來自動完成這段代碼：
var entryJS = glob.sync('./src/pages/**/*.js').reduce(function (prev, curr) {
prev[curr.slice(6, -3)] = curr;
return prev;
}, {});
這裏的'./src/pages/**/*.js'咱們按照必定的規則去匹配咱們的入口j s便可。
生成的的是:
{ 'pages/boys/index': './src/pages/boys/index.js',
'pages/goods/index': './src/pages/goods/index.js',
'pages/index/index': './src/pages/index/index.js',
'pages/sotho/index': './src/pages/sotho/index.js' }
與咱們想要的行爲一致
一樣咱們也升級下咱們的webpack.dev.conf.js中的plugins
var htmls = glob.sync('./src/pages/**/*.html').map(function (item) {
return new HtmlWebpackPlugin({
filename: './' + item.slice(6),
template: item,
inject: true,
chunks:[item.slice(2, -5)]
});
});
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
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 FriendlyErrorsPlugin()
].concat(htmls)
})
生成的是：
HtmlWebpackPlugin {
options:
{ template: './src/pages/boys/index.html',
filename: './pages/boys/index.html',
hash: false,
inject: true,
compile: true,
favicon: false,
minify: false,
cache: true,
showErrors: true,
chunks: [ 'pages/boys/index' ],
excludeChunks: [],
title: 'Webpack App',
xhtml: false } }
相關文章
- 1. 基於webpack2.x的vue2.x的多頁面站點
- 2. Vue2.x之疑點
- 3. vue2.x：2、vue頁面開發詳解
- 4. vue2.X的路由
- 5. 基於Vue2.x日期選擇組件
- 6. webpack2.x抽取css
- 7. webpack2&vue2
- 8. vue1.x 與 vue2.x 差別
- 9. 關於Vue2.x的筆記(一)
- 10. 關於Vue2.x的筆記(二)
- 更多相關文章...
- • XSL-FO 頁面 - XSL-FO 教程
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • ☆基於Java Instrument的Agent實現
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 基於webpack2.x的vue2.x的多頁面站點
- 2. Vue2.x之疑點
- 3. vue2.x：2、vue頁面開發詳解
- 4. vue2.X的路由
- 5. 基於Vue2.x日期選擇組件
- 6. webpack2.x抽取css
- 7. webpack2&vue2
- 8. vue1.x 與 vue2.x 差別
- 9. 關於Vue2.x的筆記(一)
- 10. 關於Vue2.x的筆記(二)