当我升级到 Vue 2.6.0 时，为什么会收到“SyntaxError：字符类中的无效范围”？答案

【问题标题】：Why am I getting "SyntaxError: invalid range in character class" when I upgrade to Vue 2.6.0?当我升级到 Vue 2.6.0 时，为什么会收到“SyntaxError：字符类中的无效范围”？
【发布时间】：2019-07-06 15:18:48
【问题描述】：

我已将我的 vue 更新到 2.6.0，并在我的浏览器控制台中收到此错误消息：

SyntaxError: invalid range in character class vue.runtime.esm.js:495
2b0e/<     vue.runtime.esm.js:495
2b0e     vue.runtime.esm.js:1
s     bootstrap:78
56d7     ExportTable.vue:1:556
s     bootstrap:78
[0]     bootstrap:151
s     bootstrap:78
n     bootstrap:45
<anonymous>     bootstrap:151
<anonymous>     https://mywebsite.com:8443/js/app.ee42fe22.js:1:2

我的后台是Spring Boot。我正在通过运行npm run build 构建前端并将其复制到我通过pom.xml 设置的Spring Boot 的资源文件夹中。

在升级到 2.6.0 之前，我使用的是 2.5.22，一切正常。为了缩小问题的范围，我尝试了很多浪费时间的事情，但我注意到，当我删除了出现错误的 ExportTable.vue 文件的 <style>...</style> 块时，错误将不再出现在 ExportTable.vue 中，而是显示在父组件中。

<style>
.title-search {
  margin-top: 30px;
  margin-bottom: 30px;
  padding-left: 35px;
}

#hiddenDailyLimitFld {
  color: #c21232;
  background-color: #f9dede;
  border: 1px solid #c21232;
  padding: 8px 5px;
  margin-bottom: 15px;
  border-radius: 2px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  font-weight: 500;
}

.content-searchLinkBtn {
  position: relative;
  padding-right: 35px;
  overflow: auto;
  width: 100%;
  box-sizing: border-box;
}

.newSearchBtn {
  color: #ffffff;
  background-color: #4679b2;
  width: 8em;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 3px;
  float: right;
}
</style>

我还尝试逐个删除每个 css 选择器块并构建/部署到生产环境以查看它是否是导致它的特定 css 块，但错误继续出现，直到我删除所有 CSS 块和<style>...</style> 标记自己。

奇怪的是，我只有在使用npm run build 命令部署到生产环境时才能得到它。我的package.json 看起来它正在根据此块运行正确的命令：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

当我使用 vue-cli3 在任务菜单下“服务”时，看起来它运行命令$ vue-cli-service serve --mode development --dashboard，没有错误，一切正常。我尝试使用vue-cli-service build --mode development 部署到 prod，它运行良好，因此在它被缩小或构建用于生产时似乎存在问题。

我认为这可能与 2016 年的这个问题有关： https://github.com/vuejs/vue/issues/2291

更新：这是我的main.js 文件：

import './plugins/vuetify'
import '@/resources/css/global.css'
import '@/resources/css/font-awesome-4.7.0/css/font-awesome.css'

import Vue from 'vue';

import App from './App';
import Error from '@/view/Error/Error.vue';
import router from './router.js';
import store from './store.js'
import rest from '@/services/RestService.js';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import './resources/js/font-awesome.js'

Vue.component('font-awesome-icon', FontAwesomeIcon);

Vue.config.productionTip = true;
Vue.config.devtools = true;

var vue_opts = { el: '#app', render: h => h(Error) };
rest.check().then((response) => {
  if (response.user) {
    vue_opts.render = h => h(App);
    vue_opts.router = router;
    vue_opts.store = store;
  }
  new Vue(vue_opts);
})
  .catch((res) => {
    new Vue(vue_opts);
  });

【问题讨论】：

你在任何地方使用regex吗？
我不是。起初，我以为可能是因为我看到了一篇关于它的帖子，但是他们的错误消息表明这是一个正则表达式语法错误。我检查了正则表达式，但没有正则表达式。

标签： spring-boot vuejs2 vuex vuetify.js

【解决方案1】：

您是否也升级了 Spring Boot 后端？

在我的情况下，有相同的错误消息，我的后端发送了错误的 Charset-Header。从 Windows 启动我的 jar，导致标题 windows-1252，来自 Linux US-ASCII。

我必须将我的 vertx 默认字符集设置为 UTF-8。在春天How to set UTF-8 character encoding in Spring boot? 可能是你的解决方案？

否则，仅取决于前端，此 https://forum.vuejs.org/t/misplaced-meta-charset-utf-8-fun/55800 可能有用。

同样，最后我认为您向浏览器发送了错误的编码。

【讨论】：