资料

vue-cli 中文官网

正文（3.x）

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

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

1. 报错文字

Invalid Host/Origin header
[WDS] Disconnected!

2. 解决参考地址

Vue thinks local IP address is global, causing several issues · Issue #1616 · vuejs/vue-cli

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

官网地址

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 官网的源码时，下面是查看的截图

马桶源码查看截图

• 后来发现我之前用的时候也没注意过这个问题耶，/尴尬

2. 解决问题

• 官网提供了专门的配置解决这个问题

配置参考 | Vue CLI 3

• 具体实施：在 vue.config.js 的 module.exports 中加入下面的配置

productionSourceMap: false

4. .vue 文件中使用了没写内容的 script 和 style 空标签导致的 bug

1. script 没写内容

• 源码示例

<script>
</script>

• bug文字描述

Cannot set property 'render' of undefined

• 解决方法
• 在里面写上内容 export default {}
• 删掉 script 标签

2. 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.lock yarn 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