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

问题描述

我已将 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 选择器块并构建/部署到生产环境以查看它是否是导致它的特定 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，没有错误，一切正常。我尝试部署到 prodvue-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);
  });

标签： spring-bootvuejs2vuexvuetify.js

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

问题描述

解决方案

推荐阅读