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

依旧使用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></div> <!-- built files will be auto injected --> </body> </html>

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

index.vue

<style scoped> .boys { background-color: red; } </style> <template> <div> 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 = false new Vue({ el: '#app', template: '<Index/>', components: { Index } })

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

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

修改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应用。

:9090/pages/index/index.html 访问index页面

:9090/pages/boys/index.html 访问boys页面

:9090/pages/goods/index.html 访问goods页面

:9090/pages/sotho/index.html 访问sotho页面

再来看下我们的dom结构是什么样:

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

页面里的js就是我们通过插件注入的,并且我们是通过指定chunks完成。

build

运行npm run build

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wydywg.html