vue webpack多页面构建的实例代码第1/3页
时间：2022-05-01 09:15:09|栏目：vue|点击： 次
项目示例地址： https://github.com/ccyinghua/webpack-multipage
项目运行:
下载项目之后
# 下载依赖 npm install # 运行 npm run dev http://localhost:3000/login.html http://localhost:3000/index.html
一、开发环境
node v6.11.0
二、安装vue-cli脚手架
npm install vue-cli@2.8.2 -g
三、初始化项目
vue init webpack webpack-multipage // 创建项目 cd webpack-multipage // 进入webpack-multipage目录 npm install // 下载依赖 npm run dev // 运行
四、修改配置支持多页面
将项目根目录index.html,src下的文件删除，重新调整的src结构目录：
|-- src
|-- assets
|-- components
|-- entry
|-- index // index模块
|-- components
|-- Hello.vue
|-- router
|-- index.js
|-- index.html
|-- index.js
|-- index.vue
|-- login // login模块
|-- login.html
|-- login.js
|-- login.vue
(1) 修改build/util.js,在文件最后添加
# 先下载glob组件 npm install glob -D
将目录映射成配置。如./src/entry/login/login.js变成映射{login: './src/entry/login/login.js'}
var glob = require('glob');
exports.getEntries = function (globPath) {
var entries = {}
glob.sync(globPath).forEach(function (entry) {
var basename = path.basename(entry, path.extname(entry), 'router.js');
entries[basename] = entry
});
return entries;
}
(2) 修改build/webpack.base.conf.js,找到entry属性,使用了uitls.js文件中新添加的方法getEntries，将entry中的js都映射成程序的入口
module.exports = {
entry: utils.getEntries('./src/entry/*/*.js'),
...
}
(3) 修改build/webpack.dev.conf.js
删除文件内原有的HtmlWebpackPlugin相关内容
...
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
...
在文件最后添加
var pages = utils.getEntries('./src/entry/*/*.html')
for(var page in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: page + '.html',
template: pages
相关文章
-
这篇文章主要介绍了详解element-ui日期时间选择器的日期格式化问题，本文用到了DateTimePicker来选择日期时间，但是在将数据传回后台的过程中遇到了一些令人头疼的问题，有兴趣的一起来了解一下2019-04-04 -
下面小编就为大家带来一篇Vue2.0 从零开始_环境搭建操作步骤。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06 -
这篇文章主要介绍了vue cli 3.0 搭建项目的图文教程，本文通过图片文字相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05 -
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
这篇文章主要介绍了详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05 -
这篇文章主要介绍了在vue2.0中引用element-ui组件库,需要的朋友可以参考下2018-06-06 -
这篇文章主要介绍了从0到1构建vueSSR项目之路由的构建，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03 -
这篇文章主要介绍了Vue自定义render统一项目组弹框功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06 -
这篇文章主要介绍了vue中上传视频或图片或图片和文字一起到后端的解决方法，需要的朋友可以参考一下2019-12-12 -
这篇文章主要介绍了vue.js使用watch监听路由变化的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07 -
本篇文章主要介绍了详解Vue路由钩子及应用场景（小结），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
上一篇：vue自定义可选时间的日历组件
栏 目：vue
下一篇：vue多页面项目开发实战指南
本文标题：vue webpack多页面构建的实例代码第1/3页
本文地址：http://www.codeinn.net/misctech/200686.html
最新评论