资料
正文（3.x）
1. 初次创建项目，控制台报错(一直循环，真的恶心)
解决之后不知为何，错误无法再次还原了
- 报错文字
Invalid Host/Origin header
[WDS] Disconnected!
- 解决参考地址
Vue thinks local IP address is global, causing several issues · Issue #1616 · vuejs/vue-cli
- 具体解决方法
- 在
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
- 依照官网的设置出现问题
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
- 解决问题
-
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 文件夹过大
- 发现问题是在看今天(2019.1.15)新出的一款匿名社交产品 马桶MT 官网的源码时，下面是查看的截图
马桶源码查看截图
- 后来发现我之前用的时候也没注意过这个问题耶，/尴尬
- 解决问题
- 官网提供了专门的配置解决这个问题
- 具体实施：在
vue.config.js的module.exports中加入下面的配置
productionSourceMap: false
4. .vue 文件中使用了没写内容的 script 和 style 空标签导致的 bug
-
script没写内容
- 源码示例
<script>
</script>
-
bug文字描述
Cannot set property 'render' of undefined
- 解决方法
- 在里面写上内容
export default {} - 删掉
script标签
-
script没写内容
- 源码示例
<style lang="stylus">
@import './style/common'
</style>
- 这样导致的问题
打包出现空的 `css` 文件
后端java一起上传至服务器时，空文件并没有被上传上去，页面访问时该css资源404，且使用该资源的路由对应的页面脚本会因为文件找不到而报错，该路由页面会直接打不开
- 解决方法
- 直接删掉
style标签即可
5. 依照官网结构写的 store 目录结构，导致页面出错
- 错误文本
[vuex] unknown mutation type: updateVipCard
- 错误原因
官方文档 - 命名空间
购物车示例中，由于需要 "具有更高的封装度和复用性，你可以通过添加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. -
问题解析
参考文章
)
参考如上文章的内容，结论是vue-loader的版本问题，我看了下项目内部package.json使用的版本是14.2.2 -
问题解决
先去 github - vue-loader 上看了下最新的版本号，在命令行中升级
vue-loader的版本yarn upgrade vue-loader@15.7.1 重新启动项目问题已解决了
2. 问题二
-
警告内容
caniuse-lit e is outdated. Please run next command `yarn upgrade caniuse-lite browserslist` -
问题解析
参考文章
参考如上文章的内容，结论是 删除yarn.lockyarn install -
问题解决
删除
yarn.lock文件和node_modules目录，再执行yarn重新安装项目中的依赖（需要注意的是这里默认安装的是所有依赖的最新版本）yarn 重新启动项目问题已解决了
正文（4.x）旧项目升级问题记录
1. 文件命名造成的引用失败的问题
image.png
- 如上所示的报错，具体代码以及目录结构如下
image.png
image.png
之前旧项目是没有这样的错误的，所以我猜测是命名的问题导致的。
首先我改成如下这样时就是好用的
image.png
- 接着我尝试修改组件目录中文件的名称
Index => index就是把首字母的大写改成小写，然后再重启代码，bingo！！！问题果然没有了
2. Critical dependency: the request of a dependency is an expression
参考文章：如何解决 Critical dependency: the request of a dependency is an expression ？
依照上述文章内容，这个错误源自webpack的版本问题，高版本的不可以在import中使用变量
- 下图中是修复前和修复后的代码对比图
image.png
image.png
