基於webpack2.x的vue2.x的多頁面站點

時間  2019-11-24
標籤 基於 webpack2.x webpack vue2.x vue 頁面 站點 简体版
原文   原文鏈接

 

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文件夾中的代碼:java

index.htmlnode

<!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.htmlwebpack

index.vuegit

<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文件同樣的含義

其餘幾個頁面同樣也是同理,具體能夠見: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應用。

再來看下咱們的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的多頁應用完成了。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程