Question

我已经将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构建前端，并通过Spring Boot将其复制到我设置的pom.xml的资源文件夹中。

在升级到2.6.0之前，我使用的是2.5.22，一切工作正常。为了缩小问题的范围，我尝试了很多浪费时间的事情，但是我发现，当我删除<style>...</style>文件的ExportTable.vue块时，我得到了错误，该错误将不再出现在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选择器块1删除1，然后构建/部署到生产环境中，以查看是否是导致它的特定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部署到生产中，并且工作正常，因此在缩小或为生产而构建时似乎出现了问题。

我认为这可能与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);
  });

Answer 1

您还升级了Spring Boot后端吗？

在我的情况下，同样的错误消息，我的后端发送了错误的Charset-Header。从Windows启动我的jar，从Linux US-ASCII生成Header Windows-1252。

我必须将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可能会有用。

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

升级到Vue 2.6.0时，为什么会出现“ SyntaxError：字符类中的无效范围”的问题？

1 个答案: