详解基于webpack2.x的vue2.x的多页面站点-eolink官网

详解基于webpack2.x的vue2.x的多页面站点

本文介绍了基于webpack2.x的vue2.x的多页面站点，分享给大家，具体如下：

vue的多页面

依旧使用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

这个是我们要单独生成的页面,最后也是生成index.html

index.vue

boys got many things.

这是我们的vue文件，可以看成一个组件，其实.vue文件你可以看成一个语法糖，最终会被vue-loader编译成js,生成对应的css,js,dom

index.js

import Vue from 'vue'

import Index from './index.vue'

Vue.config.productionTip = false

new Vue({

el: '#app',

template: '',

components: { Index }

})

这就是主要文件了，这里执行vue的实例化，用法同在浏览器端页面中直接引入vue.js文件一样的含义

其他几个页面一样也是同理,具体可以见:

https://github.com/zhaoqize/vue-advance/tree/master/vue2-multiple

修改webpack.config.js

由于vue中的配置使用了模块化管理，所以我们需要修改下面两个文件：

1、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页面入口

...

2、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 } }

多平台统一管理软件接口，如何实现多平台统一管理软件接口

267 2023-04-17

详解基于webpack2.x的vue2.x的多页面站点

多平台统一管理软件接口，如何实现多平台统一管理软件接口

java中的接口是类吗

vue项目接口域名动态的获取方法

推荐文章

接口调用是什么意思？几种常用接口调用方式

接口设计原则

8款在线 API 接口文档管理工具

api管理系统是什么？

什么是接口调试？接口调试的步骤有哪些？

api 接口管理系统有哪些？

接口测试有几种测试方法

API文档生成工具有哪些？

微服务和api网关区别

交换机配置步骤

最近发表

热评文章

在线接口文档管理工具推荐，支持在线测试，HTTP接口

开源的在线接口文档wiki工具Mindoc的介绍与使

如何优雅的进行接口设计？接口设计的六大原则是什么？

什么是API测试,api检测公司

软件接口设计怎么做？前后端分离软件接口设计思路

接口管理平台推荐，几大接口管理平台总有一款适合你！