登录
当前位置： 首页 > 编程笔记 >

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

符鸣
2023-03-14
本文向大家介绍详解基于webpack2.x的vue2.x的多页面站点，包括了详解基于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

<!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 = false

new Vue({
 el: '#app',
 template: '<Index/>',
 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 } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

 类似资料：
  • 详解Vue2.x-directive的学习笔记

    本文向大家介绍详解Vue2.x-directive的学习笔记，包括了详解Vue2.x-directive的学习笔记的使用技巧和注意事项，需要的朋友参考一下 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。

  • 详解一个基于react+webpack的多页面应用配置

    本文向大家介绍详解一个基于react+webpack的多页面应用配置，包括了详解一个基于react+webpack的多页面应用配置的使用技巧和注意事项，需要的朋友参考一下 简单介绍 首先本文不会对webpack代码进行解释，其所有配置都可以在文档上找到。 平时工作中会写一些多页面应用，因为习惯了react的开发模式，故此写了一个简单的配置，跟大家一起分享。如果你也喜欢，对你的开发有所帮助，希望给点

  • 基于cocos2d-x的对对碰

    基于 cocos2d-x 编写的对对碰游戏。即三个相同图案排成一行的时候就会消去。 [Code4App.com]

  • Vue2.x通用编辑组件的封装及应用详解

    本文向大家介绍Vue2.x通用编辑组件的封装及应用详解，包括了Vue2.x通用编辑组件的封装及应用详解的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Vue2.x通用编辑组件的封装及应用，供大家参考，具体内容如下 效果   组件源码 父组件中引用 注：组件源码中import '@/common/font/iconfont.css'目的是为了引入编辑图标，图标使用于iconfont官网

  • 基于vue.js的分页插件详解

    本文向大家介绍基于vue.js的分页插件详解，包括了基于vue.js的分页插件详解的使用技巧和注意事项，需要的朋友参考一下 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。想了解更多，请戳http://cn.vuejs.org/ html代码： css部分，可根据自己的实际需要进行调整： js部分： 首先要创建一个基本组件 继而要利用computed计算页码，

  • 详解Angular 4.x Injector

    本文向大家介绍详解Angular 4.x Injector，包括了详解Angular 4.x Injector的使用技巧和注意事项，需要的朋友参考一下 在介绍 Angular Injector (注入器) 之前，我们先要了解 Dependency Injection，即依赖注入的概念。 依赖注入允许程序设计遵从依赖倒置原则 (简单的说就是要求对抽象进行编程，不要对实现进行编程，这样就降低了客户端与

相关阅读

详解Angular 4.x Injector详解用webpack2搭建angular2的项目基于Vue2的移动端开发环境搭建详解PDF页面的原点（x，y）在哪里？SpringMVC基于注解的Controller详解

相关文章

GitLab维基页面Spring AOP基于注解的Around通知Spring AOP基于注解的After Returning Advice深信服X计划面试时间线拼多多-运营管培生（主站）-面经

相关问答

迁移ApacheCamel2。x、 x到3。x、 x试图找到满足n+x=n^x的x的数目，但由于超时而失败动态创建的图表。js图表基于x轴的人口过多时间？莲花多米诺8.5.2中的X页构建问题vert. x自动缩放-vert. x部署多顶点

相关工具

基于cocos2d-x的对对碰X#X-Bootx-RdbmsSyncToolx-ElementaryArithmeticProblemTool

相关文档

GatewayWorker 2.x 3.x 手册Cocos2d-x 用户手册 v3.xwebpack2 包教不包会WorkerMan 3.x 手册PHP-X 中文文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.