一、开发环境使用Ajax请求,报错 
网上查的资料,在config中的index.js这样设置
proxyTable:{
'/api':{
target:'', //此处为你的API接口地址
changeOrigin:true,
pathRewrite:{
'^/api':'' //这里理解为用api代替target中的地址
}
}
}
配置完后,请求依然报错,大致是https证书的问题
【HPM】 Error occured while trying to proxy request /xxx/ from localhost:8080 to https://xxxx.xx/xxxx/ ( DEPTH_ZERO_SELF_SIGNED_CERT) (https://nodejs.org/api/errors.html#errors_common_system_errors)
由于后台其实没有证书,所以就增加了个配置:
proxyTable:{
'/api':{
target:'', //此处为你的API接口地址
changeOrigin:true,
pathRewrite:{
'^/api':'' //这里理解为用api代替target中的地址
},
secure:false
}
}
 
二、路由钩子--beforeRouteEnter
刚开始在路由文件中是这样配置的:
router.js
let router=new VueRouter({
mode:'history',
routes:[
{
path:'/',
component:LoginPage,
beforeRouteEnter:(to,from,next)=>{
...//这样发现不会触发,需在相应的组件里加钩子函数
}
}
]
})
 
修改后 login.vue
export default(){

beforeRouteEnter:(to,from,next)=>{
...//在这里加
}
}

其实在vue-router的官方文档中写的很清楚,自己没有注意。

三、vue中引入bootstarp
考虑使用bootstrap来进行布局,因此需要在vue项目中引入bootstrap。
    1)安装jquery,因为bootstarp中很多依赖jquery:npm install jquery --save--dev 
    2)安装bootstrap: npm install bootstrap
    3)配置jquery,以插件方式打包,在webpack.base.conf.js中加入以下代码
let webpack = require('webpack')
在module.exports中加入插件相关配置
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
] 
    4).在入口文件main.js中引入bootstarp
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
 
四、路由权限控制
  • 鉴权:登录后记录token,使用路由钩子beforeEach,判断是否有登陆。
  • 权限控制路由显示:动态路由,根据登录后的用户角色来匹配
五、打包上线--vue-router history模式的页面返回404
使用npm run build打包好后,访问站点,发现首页显示没有问题,但是路由跳转到某个页面就返回404。在开发环境运行都没有问题,上网一搜,原来是路由的history模式,如果改成hash模式是没有问题的,原因在于使用history模式还需要后台配置支持,vue-router官方文档中也提到了这一点。HTML5 history模式

Vue项目中遇到的一些问题总结的更多相关文章

  1. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  2. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  3. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  4. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  5. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  6. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  7. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  8. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  9. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

  10. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

随机推荐

  1. PAT甲级——1095 Cars on Campus (排序、映射、字符串操作、题意理解)

    本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/93135047 1095 Cars on Campus (30 分 ...

  2. Luogu P4159 [SCOI2009]迷路 矩阵快速幂+精巧转化

    大致就是矩阵快速幂吧.. 这个时候会发现这些边权$\le 9$,然后瞬间想到上回一道题:是不是可以建一堆转移矩阵再建一个$lcm(1,2,3,4,5,6,7,8,9)$的矩阵?...后来发现十分的慢q ...

  3. Murano PL

    To develop applications, murano project refers to Murano Programming Language (MuranoPL). It is repr ...

  4. formatter 操作列表的合并

    {field:'22',title:'操作',width:250,align:'center',sortable:true,formatter : function(value, row, index ...

  5. HDU 5501——The Highest Mark——————【贪心+dp】

    The Highest Mark Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Other ...

  6. 寻找jar包的好方法

    好东西分享下: 下载jar包不用愁 http://maven.outofmemory.cn/

  7. Devexpress之GridControl显示序列号

    先上图: 操作方法: 1.先设置一下gridview中属性:IndicatorWidth,一般为:40.如下图:(一般可以显示5位数字.如要更长显示,自己测试一下.) 2.找到gridview中的:C ...

  8. Java并发(三):实例引出并发应用场景

    前两篇介绍了一些Java并发的基础知识,博主正巧遇到一种需求:查询数据库,根据查询结果集修改数据库记录,但整个流程是做成了一个schedule的,并且查询比较耗时,并且需要每两分钟执行一次,cpu经常 ...

  9. LVS 集群工作原理

    1. 集群:集群(cluster )就是一组计算机,它们作为一个整体向用户提供一组网络资源,单个计算机系统就是一个集群节点(node). 2. 集群种类: <1>. 负载均衡集群(Load ...

  10. oracle报错:ORA-01658(转自52斋347)

    在oracle里创建表,报出错:ORA-01658: 无法为表空间space中的段创建 INITIAL 区:或者: ORA-01658: unable to create INITIAL extent ...