vue-cli 3.x 踩坑（持续更新）

资料

vue-cli 中文官网

正文

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 没写内容

• 源码示例

• bug文字描述

Cannot set property 'render' of undefined

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

2. script 没写内容

• 源码示例

• 这样导致的问题

打包出现空的 `css` 文件

后端 java 一起上传至服务器时，空文件并没有被上传上去，页面访问时该 css 资源 404，且使用该资源的路由对应的页面脚本会因为文件找不到而报错，该路由页面会直接打不开

• 解决方法
• 直接删掉 style 标签即可

5. 依照官网结构写的 store 目录结构，导致页面出错

官网链接的购物车示例代码

• 错误文本

[vuex] unknown mutation type: updateVipCard

• 错误原因

官方文档 - 命名空间
购物车示例中，由于需要 "具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。"，但是我的业务暂时没有这个需求也用这个了，造成了报错

export default {
  state,
  getters,
  actions,
  mutations
}

• 解决方法

删掉代码中的 namespaced: true