溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
依舊使用vue-cli來初始化我們的項目
然后修改主要目錄結構如下：
├── 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,sotho
首先看boys文件夾中的代碼:
index.html
<!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.html
index.vue
<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,dom
index.js
import Vue from 'vue'import Index from './index.vue'Vue.config.productionTip = falsenew Vue({
el: '#app',
template: '<Index/>',
components: { Index }
})這就是主要文件了，這里執行vue的實例化，用法同在瀏覽器端頁面中直接引入vue.js文件一樣的含義
其他幾個頁面一樣也是同理,具體可以見:https://git.oschina.net/zqzjszqzjs/vue2-x-multiple
由于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完成。
運行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: 2467c91090ccf4690865Version: webpack 2.5.1Time: 6319ms Asset Size Chunks Chunk Namesstatic/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/indexstatic/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/indexstatic/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的多頁應用完成了。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
