vue-router改为history模式

yunhao 发布于2019-08-23 10:52 / 1205人阅读

摘要：打包好后本地测试运行是否正常环境搭建这个时候需要利用中的方法如下安装最新版本中将命令工具分家出来了还需要安装一个命令工具创建一个工程进入项目主目录安装必备包启动程序把打包后的文件夹放在文件夹里访问就能看到项目了这样测试好了后就可以丢后

打包好后本地测试运行是否正常
环境搭建：

这个时候需要利用node中的express,方法如下:
安装express: npm install -g express;
最新express4.0版本中将命令工具分家出来了,还需要安装一个命令工具: npm install -g express-generator;
创建一个express工程: express helloworld;
进入项目主目录: cd helloworld;
安装必备包: npm install;
启动程序: npm start;
把打包后的dist文件夹放在public文件夹里,访问http://localhost:3000/dist就能看到项目了,这样测试好了后,就可以丢后台了

存在问题：提示css文件和mainfest.js文件404，且提示webpack.jsonp is undefined(这个错误是由于mainfest.js文件404导致，因为app.js和其他的js文件用到了webpack.jsonp，但是他是在mainfest中定义的)
解决404问题：在config文件夹中的index.js中设置一个路径问题,不然也会报错,在js中找到build:{assetsPublicPath: "./"},默认路径是"/",需要加上"."

相关参考链接： https://www.jb51.net/article/...

         https://blog.csdn.net/GossipHHH/article/details/78749308

route使用history模式，去掉链接里的#号
踩过的坑：

1.

这样配置
这里assetsPublicPsth写成‘./’(是在当前目录下去找静态文件)，导致刷新页面或者直接访问页面localhost:3000/versionflow/mychange的时候提示资源文件404

**原因： ./ 代表的是去当前目录下找静态文件，所以程序会在public/versionflow下去找静态文件，但是并没有versionflow这个文件夹，所以会提示404（根目录为public）**


2.

这样配置，直接访问就提示找不到静态资源404，

算了不写了，千坑万坑都是自己亲手挖的

正确写法

assetsSubDirectory设置的文件需要能够在根目录(需要在哪个目录下找是根据assetsPublicPath的设置决定的)下找到
地基没有打牢，重新打一下地基

=========================================转载
首先要说的是 ./ ../ /
/ 取根目录:
file:///
./ 取当前目录:
file:///Users/xxx/Documents/projects/outsourcing/youreact/dist/
../ 取当前目录的上一层目录:
file:///Users/xxx/Documents/projects/outsourcing/youreact/

assetsRoot:构建输出目录也就是构建后的东西都扔这里
assetsSubDirectory:资源子目录除了index.html，其余的js img css都分在这里
assetsPublicPath:项目目录一个杠杠啥意思呢，是根目录的意思

作者：懒先森
链接：https://www.jianshu.com/p/947...
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96766.html

Vue-router History模式下，空白页面，如何配置tomcat服务器

摘要：页面刚用开发项目没多久，很多时间都在坑里慢慢摸索，今天要填的坑是在开启模式后，直接进入路由子目录，页面会报。模式配置文档中写了和服务器如何配置，这里添加一下服务器里使如何配置的。结束到此结束，此致敬礼页面404 刚用vue开发项目没多久，很多时间都在坑里慢慢摸索，今天要填的坑是在vue-router开启history模式后，直接进入路由子目录，页面会报404。为什么呢，原因很简单。因...

EddieChan 2019-08-20 18:20 评论0 收藏0
Vue Router history模式的配置方法及其原理

摘要：但如果要使用模式，我们需要在后端进行额外配置。模式的配置方法我们来看看官方文档是教我们怎么配置的模式。模式的配置实践及原理强烈建议阅读这部分之前，先看一下的这部分文档和这部分文档。只配置前端的情况首先，我们将设置为，但不配置后端。始发于我的博客 ryougifujino.com，欢迎访问留言。 vue-router分为hash和history模式，前者为其默认模式，url的表现形式为...

Richard_Gao 2019-08-30 11:04 评论0 收藏0
history和hash，vue-router

摘要：另外该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件不会被触发使用的时候，可以为事件指定回调函数或者回调函数的参数是一个事件对象，它的属性指向和方法为当前所提供的状态对象即这两个方法的第一个参数。 history window.history(可直接写成history)指向History对象，它表示当前窗口的浏览历史。History对象保存了当前窗口访问过的所有页...

godiscoder 2019-08-23 18:07 评论0 收藏0