1, vue-router 路由 有两个模式 (mode)

  • hash (默认模式)

    使用URL来模拟一个完整的URL 但是没个URL都会带上 "#/'' 支持所有浏览器

    这个模式使用 redirect (重定向) 手动刷新页面会定到 第一个页面

  • history 模式

    history.pushState API 来完成 URL 跳转而无须重新加载页面 这个模式可去掉"#/"

    同时线上 (生成环境)需要后台配合把所有访问不到的资源路径后台重定向到 index.html

    后端配置例子

    https://router.vuejs.org/zh/guide/essentials/history-mode.html

  1. base 基础路径 默认为"/"

    整个单页应用服务在 /dist/ 下，然后base就应该设为"/dist/"。

  1. 打包生产环境 会生成 dist目录

    • 使用 hash 模式

      如果页面是空白的 可能是 config ->index build 对象中assetsPublicPath "/" 的问题 可设置为"./"

      "/" :表示 访问服务器根目录资源

      "./" 表示访问服务器当前目录的根目录资源

    • 如果使用 history 模式 如果只有样式 无HTML 内容

      那么 不仅仅 是assets PublicPath 问题

      还需进入dist 目录 全选打包 并放入 服务器访问的根目录解压 比如 Tomcat 就要放进 ROOT 目录中

      因为 只打包dist 文件夹 解压的时候会生成 dist文件夹

      而进入 dist 文件夹全选文件打包 解压时会生成对应文件

    • 如果 要使用 history 模式 并且不把前端资源包放到 服务器根目录下, 必须 配合 base 来使用

vue-cli npm run build 打包问题 webpack@3.6的更多相关文章

  1. Vue -- vue-cli(vue脚手架) npm run build打包优化

    这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...

  2. vue使用npm run build命令打包

    vue使用npm run build命令打包项目   当我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行 ...

  3. npm run build 打包后，如何运行在本地查看效果（Nginx服务）

    这段时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆 ...

  4. linux vue项目+npm run build + nginx

    系统 环境 vue   nginx 步骤 1.打包vue项目 2.配置nginx 打包vue项目 1.项目配置   我们使用服务器的8000端口 2.打包 # npm run build 打包成功会创 ...

  5. npm run build打包后自定义动画没有执行

    问题描述:在vue项目中,当你自己写了一些自定义动画效果,然后你npm run build打包项目放到线上环境后,发现动画并没有效果. 解决办法:在vue项目中找到build文件夹下的vue-load ...

  6. 关于npm run build打包后css样式中的图片失效的问题(如background)

    平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...

  7. vue 关于npm run build 的小问题

    vue项目使用npm run build命令进行打包操作,打包之后试运行报错,报错为: 且命令行警告信息为: 解决办法: 找到项目目录下的config文件夹里的index.js文件,将build对象下 ...

  8. npm run build 打包后空白页解决问题两种情况

    问题一:assetsPublicPath配置错误 解决办法:打开config/index.js文件 build:{        // assetsPublicPath: '/'        ass ...

  9. npm run build 打包后（直接打包白屏），如何运行在本地查看效果（Apache服务）

    转载: https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端 ...

随机推荐

  1. python中enumerate、xrange、range

    enumerate可以给列表自动生成一列,默认从0开始,自动增长1,可以指定默认开始值 list_product = ["thinkpad","macbook" ...

  2. mysql 日期与索引问题

    日期类型可以直接和string格式的字符串比较 select * from xxx where event_time>'2018-06-02' 可以使用索引, mysql默认会把后面的字符串转成 ...

  3. 非关系型数据库---Memcached

    一.概述 1.Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载: 2.Memcached通过 在内存中缓存对象和数据 来减少读取数据库的次数,从而提升网站的 ...

  4. LeetCode 232 Implement Queue using Stacks 两个栈实现队列

    class MyQueue { public: /** Initialize your data structure here. */ MyQueue() { } /** Push element x ...

  5. 完美解决百度地图MarkerClusterer 移动地图时，Marker 的Label 丢失的问题

    这篇文章来自http://www.cnblogs.com/jicheng1014   不好意思,那些rss 站太生猛了. 先吐槽一下百度地图的开发者,其实这个问题我绝对不是第一个遇到的人 很多人把这个 ...

  6. Srping MVC中Controller的void方法

    第一种 通过修改response来修改页面 /** * 方式一:通过声明HttpServletResponse类型的方法入参,来使用HttpServletResponse对象. * 注意:在Contr ...

  7. How to Install VMware Tools on RHEL 7/CentOS 7

    The original address Mware Tools is one of important components for virtual machine (VM) in order ge ...

  8. 使用jQuery实现文本框input定位到文字最后（兼容所有浏览器）

    $.fn.setCursorPosition = function(position){ if(this.lengh == 0) return this; return $(this).setSele ...

  9. 关于Arduino项目的构建思想-转自openbook开源杂志

  10. python之re模块和正则表达式

    今天我们来谈谈python中模块的使用,在探讨模块前先来了解一下正则表达式的具体用法. 1.正则表达式 正则表达式就是匹配 字符串内容的一种规则.谈到正则就和字符串相关了,首先我们要知道什么是字符组. ...