vue-router改为history模式

2018-08-09 admin

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

这个时候需要利用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.javascriptcn.com/article/…

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

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

1\. 

clipboard.png

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

clipboard.png

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

2\. 

clipboard.png

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

clipboard.png

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

正确写法

clipboard.png

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://segmentfault.com/a/1190000015947783

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37643.html

文章标题:vue-router改为history模式

相关文章
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: <script> exp...
2017-03-13
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的<span style=“color: orange;”>“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
详解vue-validator(vue验证器)
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 单独使用vue-val...
2017-03-07
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
详解Vue2 无限级分类(添加,删除,修改)
本人对vue不是很懂,搜索了很多关于Vue2 无限级分类介绍,下面我来记录一下,有需要了解Vue2 无限级分类的朋友可参考。希望此文章对各位有所帮助。 <!DOCTYPE html> <html lang="en...
2017-03-13
回到顶部