正文（3.x）

1. 初次创建项目，控制台报错(一直循环，真的恶心)

解决之后不知为何，错误无法再次还原了

报错文字 ``` Invalid Host/Origin header [WDS] Disconnected!


2. 解决参考地址
> [Vue thinks local IP address is global, causing several issues · Issue #1616 · vuejs/vue-cli](https://github.com/vuejs/vue-cli/issues/1616#issuecomment-402744915)
3. 具体解决方法
- 在 `vue.config.js` 配置文件中，添加 `devServer.disableHostCheck` 配置即可

module.exports = { /**

接口代理配置
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。
https://cli.vuejs.org/zh/config/#devserver-proxy
https://github.com/chimurai/http-proxy-middleware#proxycontext-config */ devServer: { disableHostCheck: true }, }

### 2.  根据官网配置的 `devServer.proxy` 访问失败，提示 `404`
> [官网地址](https://cli.vuejs.org/zh/config/#devserver-proxy)
1. 依照官网的设置出现问题

devServer: { disableHostCheck: true, proxy: { ‘/dictpc’: { target: ‘http://183.129.5.16:8080/dictpc‘, ws: true, // proxy websockets changeOrigin: true // needed for virtual hosted sites } } },


> 依照如上设置，启动项目，直接 `404`
2. 解决问题
- `proxy` 增加 `pathRewrite` 设置即可，之后重启项目（注意每次修改配置后必须得重新启动项目）

devServer: { disableHostCheck: true, proxy: { ‘/dictpc’: { target: ‘http://183.129.5.16:8080/dictpc‘, ws: true, // proxy websockets changeOrigin: true, // needed for virtual hosted sites pathRewrite: { ‘^/dictpc’: ‘’ } } } },

### 3.  `sourcemap` 默认是开启的，导致打包出来的 `dist -> js` 文件夹过大
1. 发现问题是在看今天(2019.1.15)新出的一款匿名社交产品 [马桶MT](https://www.mtoilet.com/) 官网的源码时，下面是查看的截图
> ![马桶源码查看截图](https://upload-images.jianshu.io/upload_images/9064013-d3d5d17199ea70a7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 后来发现我之前用的时候也没注意过这个问题耶，/尴尬
2. 解决问题
- 官网提供了专门的配置解决这个问题
> [配置参考 | Vue CLI 3](https://cli.vuejs.org/zh/config/#productionsourcemap)
- 具体实施：在 `vue.config.js` 的 `module.exports` 中加入下面的配置

productionSourceMap: false

### 4. `.vue` 文件中使用了没写内容的 `script` 和 `style` 空标签导致的 `bug`
1. `script` 没写内容
- 源码示例


- `bug`文字描述

Cannot set property ‘render’ of undefined


- 解决方法
- 在里面写上内容 `export default {}`
- 删掉 `script` 标签
2. `script` 没写内容
- 源码示例


- 这样导致的问题
> ![打包出现空的 `css` 文件](https://upload-images.jianshu.io/upload_images/9064013-d06c232c9430593f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
后端 `java` 一起上传至服务器时，空文件并没有被上传上去，页面访问时该 `css` 资源 `404`，且使用该资源的路由对应的页面脚本会因为文件找不到而报错，该路由页面会直接打不开
- 解决方法
- 直接删掉 `style` 标签即可
### 5. 依照官网结构写的 `store` 目录结构，导致页面出错
> [官网链接的购物车示例代码](%5Bhttps://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/store/index.js%5D(https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/store/index.js))
- 错误文本

[vuex] unknown mutation type: updateVipCard


- 错误原因
> [官方文档 - 命名空间](%5Bhttps://vuex.vuejs.org/zh/guide/modules.html#%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%5D(https://vuex.vuejs.org/zh/guide/modules.html#%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4))<br />
购物车示例中，由于需要 "具有更高的封装度和复用性，你可以通过添加 `namespaced: true` 的方式使其成为带命名空间的模块。"，但是我的业务暂时没有这个需求也用这个了，造成了报错

export default { state, getters, actions, mutations }


- 解决方法
> 删掉代码中的 `namespaced: true`
### 6. 每次 `yarn serve` 运行项目时，控制台会出现一些警告
##### 1. 问题一
- 
警告内容

No parser and no filepath given, using ‘babylon’ the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.


- 
问题解析
> [参考文章](https://blog.csdn.net/shan1991fei/article/details/81838115)<br />
)<br />
参考如上文章的内容，结论是 `vue-loader` 的版本问题，我看了下项目内部 `package.json` 使用的版本是 `14.2.2`
- 
问题解决
> 先去 [github  - vue-loader ](https://github.com/vuejs/vue-loader/blob/master/package.json)上看了下最新的版本号，在命令行中升级 `vue-loader` 的版本

yarn upgrade vue-loader@15.7.1


- 
重新启动项目问题已解决了
##### 2. 问题二
- 
警告内容

caniuse-lit e is outdated. Please run next command yarn upgrade caniuse-lite browserslist


- 
问题解析
> [参考文章](08d9ad35747e4da0c394668bcd8b96a2)<br />
参考如上文章的内容，结论是 删除 `yarn.lock` `yarn install`
- 
问题解决
> 删除 `yarn.lock` 文件和 `node_modules` 目录，再执行 `yarn` 重新安装项目中的依赖（需要注意的是这里默认安装的是所有依赖的最新版本）