一、前言

一些问题的分享

1.Vue中使用样式无法生效

!important //yyds不生效怼就完事了
如果style设置为scoped，去掉 style 的 scoped 属性
在vue组件里，在style设置为scoped的时候，在写样式有时候对子组件不生效。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。

2.在Vue中使用axios下载excel文档，出现乱码

问题出现原因

 2.1 Postman进行后端接口访问正常下载，并可以打开文件，内容完整清晰。

 2.2 进行路径直接访问也能完整下载

 2.3 利用Vue前端下载，不仅文件下载不下来而且还是乱码

解决办法

1、最重要的是代码中要设置 responseType 的值，无论设置 blob 或者 arraybuffer 都可以。

2、设置 responseType 后，代码 new Blob([result.data]) 中是否设置 type 值已经不重要了，即使不设置，也可以下载文件。如果设置的话：

　　　　可以根据后端的字段动态设置：new Blob([result.data],{type: result.headers['content-type']})

　　　　也可以根据后端返回的值写死：new Blob([result.data],{type: "application/x-msdownload;charset=GBK"})

　　　　也可以不要编码：new Blob([result.data],{type: "application/x-msdownload"})

　　　　也可以忽略后端的返回值，直接设置：new Blob([result.data],{"application/vnd.ms-excel"})

　　　　总之：只要加了 responseType ，这里的 type 怎么写已经无所谓了。

3、如果依照上面的写法，下载的 excel 依然是乱码，就要看 vue 项目中是否引入了 mockjs，取消掉即可，取消 mock 模式之后，excel 文件打开就不会是乱码了

3. cookie 和 token 都存在 headel 中，为什么不会劫持 token

浏览器会自动带上cookie，而不会带上token

1、攻击者通过xss拿到用户的cookie然后就可以伪造cookie了。

2、或者通过csrf在同个浏览器下面通过浏览器会自动带上cookie的特性，

在通过用户网站-攻击者网站-攻击者请求用户网站的方式浏览器会自动带上cookie

但是token不会被浏览器带上，问题2解决

3、token是放在jwt里面下发给客户端的，而且不一定存储在哪里，不能通过document.cookie直接拿到，通过jwt+ip的方式可以防止被劫持，即使被劫持也是无效的jwt

什么是xss csrf攻击以及问题详解：参考文章

4. 使用webpack 打包项目，导致图片无法显示

1.jpg大小为3.1kb，file-loader中配置的limit是8192，小于limit时，一切正常的话，dist文件夹下不会生成图片文件，应该在src中以base64字符串填充。大于limit时，会生成图片文件，src中以路径填充。 wenpack图片打包详解以及问题参考文章

5. 无法解决在使用webpack 打包过程中很慢的问题

解决webapck打包速度慢的方法：

命令行执行：webpack --watch

这样会使webpack自动编译，在第一次打包的时候会慢，但是后面的编译速度会快很多。这里的原理在下面webpack如何开启watch模式会讲到。
配置 externals 来将依赖的第三方库指向全局变量，从而不再打包这个库

项目依赖的第三方库moudules很多，导致只改动一点代码就要打包很多东西，每次打包时速度会很慢。但是我们不需要重新打包这些第三方库，只需要重新打包我们的业务代码。
```
module.exports = {
    ...
    externals: {
        'react': 'window.React'
    }
    ...
}
```
我们这样配置等于让 Webpack 知道，对于 react 这个模块，就不要打包了，直接指向 window.React 就好。不过别忘了加载 react.min.js，让全局中有 React 这个变量。

另一种写法：
```
externals: 
    {
      'antd':true,
      'react': 'React',
      'react-dom': 'ReactDOM'
    }
```
上面的配置是告诉webpack在require(“react”)的时候不要去加载模块，一般写true就可以了，当然这种方式要在html入口手动引入js文件：
```
<script src=``"node_modules/react/dist/react-with-addons.js"``></script>``<script src=``"node_modules/react-dom/dist/react-dom.min.js"``></script>``<script src=``"node_modules/antd/dist/antd.min.js"``></script>
```
在项目中正常使用require(“react”)时就不会打包react了。

但是这样仍然有缺陷，由于第三方库可以依赖别的库,当新加别的库会导致webpack重新打包第三方库，详细的可以看这位老哥的文章：blog.csdn.net/fengyinchao…
将共有的模块打进另外一个文件中，然后使用CommonsChunkPlugin插件，在webpack –watch不是第一遍打包的时候就不会重复的打另外一个文件了。

详情参见;www.bianchengquan.com/article/671…

webpack如何开启watch模式

方式一：命令行执行 webpack --watch

执行webapck --watch 命令代表执行一次编译一次。

执行webapck --watch 命令代表执行一次编译多次，只要修改相关文件就会重新触发编译，方便反复调式。

方式二：修改配置文件webpack.config.js

在配置文件webpack.config.js中，输入代码watch:true

module.exports = {
    entry: {
        //...
    },
    output: {
        //...
    },
    watch: true,  
    watchOptions: {  
        ignored: /html/  
    },
}

指定watch为true以后，打包时就会自动开启watch模式，watchOptions是配置选项，ignored表示忽略某个目录的更新。

链接：juejin.cn/post/700260… 来源：稀土掘金\

6. Vue-Router 路由切换组件重用挖下的坑

 route 和 $router 混淆
 $route 是“路由信息对象”，包括path,params,hash,query,fullPath,mached,name等路由信息参数
 
 $router为VueRouter的实例，相当于一个全局的路由对象，里面含有很多属性和子对象，例如histor对象，
 经常用的跳转链接就可以用this.router.push会往history 栈中添加一个新纪录，
 返回上一个history也是使用$router.go 方法

一些问题分享