webpack2.x与vue2.x构建多页面应用实战解析

79 浏览量更新于2024-09-02 收藏 115KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"基于webpack2.x的vue2.x构建多页面站点的教程" 在现代前端开发中，Webpack 作为一款强大的模块打包工具，被广泛用于管理和构建项目。Vue.js 是一个轻量级、高性能的前端框架，它与Webpack 结合使用可以实现高效、灵活的项目构建。本篇文章将深入探讨如何基于Webpack 2.x 和 Vue 2.x 创建一个多页面站点。首先，Vue CLI 是一个官方提供的命令行工具，用于快速初始化Vue 项目的结构。在创建多页面站点时，尽管CLI通常用于单页应用（SPA）的搭建，但通过一些配置调整，同样可以支持多页面应用程序的构建。在初始项目结构中，`src/pages` 目录下包含了多个子目录，每个子目录代表一个独立的页面。例如，`boys`、`goods`、`index` 和 `sotho`，每个目录下都有对应的 `index.html`、`index.js` 和 `index.vue` 文件。这些文件分别用于定义HTML结构、处理JavaScript逻辑和Vue组件。 `index.html` 是每个页面的基础模板，其中包含一个用于挂载Vue实例的 `div` 元素。`<!DOCTYPE html>` 定义了文档类型，`charset="utf-8"` 确保编码正确，而 `title` 元素则用于设置页面标题。注释中的 `` 表示Webpack将在编译过程中自动注入构建好的JavaScript和CSS文件。 `index.vue` 文件是Vue组件，包含了模板（template）、样式（style）和脚本（script）。在这个例子中，`index.vue` 的模板定义了一个简单的div元素，并应用了名为 "boys" 的CSS类。`<style scoped>` 里的CSS只作用于当前组件，避免样式污染全局。每个页面的JavaScript逻辑在对应的 `index.js` 文件中编写。在多页面应用中，每个页面可能需要独立的入口文件，以便引入特定的组件和设置路由。例如，`index.js` 可能会导入 `index.vue` 组件，并通过Vue的实例化来挂载到页面上。 Webpack 配置文件（如 `webpack.base.conf.js`, `webpack.dev.conf.js` 和 `webpack.prod.conf.js`）需要进行相应的调整以支持多页面输出。主要改动包括配置多个入口点（entry），每个入口对应一个页面，以及生成对应的HTML文件。在 `webpack.config.js` 中，可以通过 `HtmlWebpackPlugin` 插件自动生成HTML，并将对应的JavaScript文件插入到每个页面中。在实际操作中，还需要配置Webpack的输出路径（output），确保每个页面的静态资源能够正确生成并放置在预期的位置。同时，对于CSS处理，可能需要使用 `ExtractTextWebpackPlugin` 将内联的CSS提取到单独的文件中。总结来说，通过Vue 2.x 和 Webpack 2.x 的结合，我们可以创建一个多页面站点，每个页面有自己的入口文件、Vue组件和HTML模板。通过合理的配置和插件使用，Webpack可以有效地管理这些页面的构建过程，确保项目的可维护性和扩展性。这使得开发者能够在保持Vue的便利性的同时，构建结构清晰、易于维护的多页面应用。

资源详情

资源推荐

详解基于详解基于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>

</head>

<body>

</body>

</html>

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

index.vue

.boys {

background-color: red;

}

</style>

boys got many things.

</div>

</template>

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 }

})

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38677260

粉丝: 3
资源: 918

webpack2.x与vue2.x构建多页面应用实战解析

vue+webpack多页面打包

vue+webpack支持多页面打包

webpack2.x升级到webpack5.x

webpack.base.config.js 和webpack.dev.conf.js和webpack.config.js 和webpack.prod.conf.js和 vue 项目中的config文件夹下的index.js

electron-vue Webpack 5.x Cannot read property 'publish' of undefined

vue init webpack 1.31.zip

vue.config.js和webpack.config.js区别

electron-vue webpeck升级到5.x

前端webpack.config.js 和vue.config.js

webpack.optimize.uglifyjsplugin

vue.config.js文件和webpack.config.js文件的区别

vue2的webpack.config.js在哪

获取webpack polyfills.js:35 Uncaught TypeError: Cannot read properties of undefined (reading 'match')

vue.config.js 下的配置 和webpack.config.js 下的配置有什么区别吗

webpack.base.config.js 和webpack.config.js

在vue中webpack.config.js文件在哪里和webpack配置在哪里

vue项目中webpack.config.js文件的作用

vue2 less 没有webpack.base.config.

vue.config.js和webpack.config.js一样吗

最新资源

vue.config.js 下的配置和webpack.config.js 下的配置有什么区别吗