Vue项目中可能会遇到的问题

一杯茶，一包烟，一个bug改一天……
吾日三省吾身，为甚么它能实现，为神马它不实现……

---

#### 这里记录下偶然会遇到的奇怪的问题

路由跳转后vue页面样式后混乱问题

有个组件样式没有加scoped，加载这个组件之后，有些同类名样式或标签选择器定义的样式会成为全局样式，这就会导致其他组件样式在初始加载时被覆盖。只需要将组件style加上scoped就可以解决该问题。
scoped 将当前组件样式定义为只在当前页面内生效

动态绑定图片路径无法渲染

如果遇到这种情况<img :src="item.src">

你可以改变思路，将代码改成
<img :src="require('../../assets/imgs/'+item.menu_url+'.png')">
//动态绑定src，使用require引入变量，甚至还可以拼接字符串，nice！

跳转当前页面页面不刷新

有时候使用动态路由来跳转当前页面，但页面并没有刷新怎么办?
这是vue-router’智能’的发现你跳转的组件是重复的，于是它就复用了……

解决方法：

• 使用watch监听$route,路由改变就请求数据
• 给router-view+独立的key值，可以是$route.fullpath,这样跳转的页面就都是独立的。

We’re sorry but blog doesn’t work properly without JavaScript enabled. （解决方案）

项目跑不起来，你从以下几点入手

1. vue.config.js中配置的跨域无法应用于生产环境
   解决思路：
   a. 根据不同环境设置不同的baseUrl，生产环境配置不需要跨域的url
   b. 配置nginx代理可做参考

2. 路由设置为"hash"模式

3. 更改publicPath/baseUrlvue

vue 修改一个对象的值另一个对象跟着改变

data中定义的数据，你把它赋值给另一个变量，同样是浅拷贝，复制的是其引用地址，需要改成深拷贝才行
JSON.parse(JSON.stringify()) 最佳解决思路！

vue模板中空格转义符不生效 

vue.config.js中添加

chainWebpack: config => {

    // 解决 页面中的空格占位符被清除的问题

    config.module

      .rule('vue')

      .use('vue-loader')

      .loader('vue-loader')

      .tap(options => {

        options.compilerOptions.whitespace = 'preserve'

        return options

      })

      .end()

  },
  

然后，关闭进程，重新运行（npm run serve）。

数据渲染后样式未成功渲染

场景：element 表格交换数据位置导致数据显示不全，分析后得知css样式加载未生效。

解决思路：表格内容套个template 加上v-if 再数据请求完成后重新执行一遍v-if的生命周期，条件自己定义。我用的是loading动画。

<table>
	<template v-if="!loading">
	>>>>内容
	</template>
</table>