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. html5 缓存实例

    html5 有两种缓存 1.localStorage:浏览器关闭后,数据库还存在. 2.sessionStorage:session缓存,浏览器关闭后,数据已经不存在. 实例一:localStorag ...

  2. HTML字体自动换行第二行缩进一格

    p {text-indent: -2em; margin-left: 2em;}设置text-indent: -2em;以后p标签中第一行文字向左偏移,这样第二行开始的文字就等于缩进了,但是这样设置会 ...

  3. flash 概要分析器

    这个东东 调试用.会每毫秒一次记录正在运行的函数 及相关数据    只在调试版flash player才能用. startSampling  开始记录 getSamples  获取记录 Sample ...

  4. Coursera, Deep Learning 4, Convolutional Neural Networks - week2

    Case Study (Note: 红色表示不重要) LeNet-5 起初用来识别手写数字灰度图片 AlexNet 输入的是227x227x3 的图片,输出1000 种类的结果 VGG VGG比Ale ...

  5. 第28月第3天 c语言读写文件

    1. int ConfigIniFile::OpenFile( const char* szFileName ) { FILE *fp; size_t nLen; int nRet; CloseFil ...

  6. 使用flask_socketio实现客户端间即时通信

    前期没有来得及好好总结,现在复习总结一下: Socket.IO 背后主要的思想是你可以发送和接收想要的任何事件,携带你想要的任何数据.任何可以编码为 JSON 的对象都可以做到,并且也支持二进制数据. ...

  7. python的进程/线程/协程

    1.python的多线程 多线程就是在同一时刻执行多个不同的程序,然而python中的多线程并不能真正的实现并行,这是由于cpython解释器中的GIL(全局解释器锁)捣的鬼,这把锁保证了同一时刻只有 ...

  8. MySQL对表数据操作

    一: 修改表信息 1.修改表名 alter table test_a rename to sys_app; 2.修改表注释 alter table sys_application comment '系 ...

  9. Python文件读写之r+/w+/a+

    读模式 r 打开不存在的文件会报错.不能写:如不指定模式则默认是r 写模式 w 打开不存在的文件会,会新建一个文件:打开存在的文件会先清空后覆盖原有文件:不能读 追加模式 a 打开不存在的文件会,会新 ...

  10. 【译】第八篇 SQL Server安全数据加密

    本篇文章是SQL Server安全系列的第八篇,详细内容请参考原文. Relational databases are used in an amazing variety of applicatio ...