1. 概述

1.1 说明

  项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求。

2. 实例

2.1 页面配置

2.1.1 默认首页

  使用vue脚手架搭建后的首页信息:index.html,app.vue,main.js

2.1.2 测试首页

  单独创建的首页信息:home.html ,home.vue,home.js

2.1.3 页面展示

2.2 webpack配置

2.2.1 webpack基础配置:webpack.base.conf.js

  增加入口时需要写入需要增加的文件的正确路径

  

2.2.2 webpack开发环境配置:webpack.dev.conf.js

  新增对应的页面html打包(HtmlWebpackPlugin)

  

2.2.2 webpack生产环境配置:index.js与webpack.prod.conf.js

  *** config>index.js进行打包基础配置

  

  *** build>webpack.prod.conf.js 进行打包配置

  

  注意:打包后可安装http-server进行访问打包好的文件dist:http-server ./dist ;若没有安装依赖可使用命令安装: npm install http-server -g 

VUE 多页面配置(一)的更多相关文章

  1. VUE 多页面配置(二)

    1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求,此记录为统一配置出入口. 2. 实例 2.1 页面配置 使用vue脚手架搭建 ...

  2. [转] vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  3. vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  4. vue cli3超详细创建多页面配置

    1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...

  5. VUE 多页面打包webpack配置

      思路:多配置一个main的文件,用于webpack入口使用, 然后路由的导向也应该默认指向新组件,最后通过webpack构建出一个新的独立的html文件. 缺点:生成多个html会new出多个vu ...

  6. vue 单页面应用实战

    1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA ...

  7. Vue单页面骨架屏实践

    github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...

  8. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  9. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

随机推荐

  1. SQL Server进阶(十二)常用函数

    在SQL 2012基础教程中列出子句是按照以下顺序进行逻辑处理. FROM WHERE GROUP BY HAVING SELECT ORDER BY FROM TableName WHERE Use ...

  2. POI导出Excel 错误THE MAXIMUM COLUMN WIDTH FOR AN INDIVIDUAL CELL IS 255 CHARACTERS

    int orgColWidth = (arrColWidth[column.Ordinal] + 1); if (liekuan > 255) liekuan = 255; //设置列宽 she ...

  3. C# 获取当前路径方法整理

    https://www.cnblogs.com/tianma3798/p/6553863.html1. //获取包含清单的已加载文件的路径或 UNC 位置. public static string ...

  4. ROIAlign, ROIPooling及ROIWarp对比

    RoI Pooling 实现从原图ROI区域映射到卷积区域最后pooling到固定大小的功能,然后通过池化把该区域的尺寸归一化成卷积网络输入的尺寸. ROIAlign 上面RoI Pooling从原图 ...

  5. python的for循环、while循环

    1.for循环使用之乘法表 for i in range(1,10): for j in range(1,i+1): print('%s * %s = %s '%(j,i,i*j),end='') p ...

  6. fastclick.js插件使用简单说明

    为什么存在延迟? 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作.     ...

  7. Git——如何将本地项目提交至远程仓库

    参考文章:http://blog.csdn.net/dadaxiongdebaobao/article/details/52081826   git 将一个本地文件目录提交到远程仓库的步骤 参考文章: ...

  8. Microsoft SQL - 查询与更新

    查询与更新(Query & Update) 转义引号 SQL语句中字符串只能使用单引号,如果需要转义,可用单引号转义单引号. 查询(Inquire) 以下公式中的c指代列名. 规则 1.查询语 ...

  9. ajax传递数组,后台更新

    js: var rows = $("#stu_reg_table").datagrid("getSelections"); if(rows != "& ...

  10. 前端-----html(1)

    基本结构 Doctype Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 <!DOCTYPE html> bead标签 Meta 提供有关页面的元信息,例: ...