programing

Vue 2.6.0으로 업그레이드할 때 "SyntaxError: invalid range in character class"가 표시되는 이유는 무엇입니까?

closeapi 2023. 6. 15. 21:53
반응형

Vue 2.6.0으로 업그레이드할 때 "SyntaxError: invalid range in character class"가 표시되는 이유는 무엇입니까?

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개씩 삭제하고 특정 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을 사용하여 명령을 실행하는 것처럼 보이는 "serve"할 때$ vue-cli-service serve --mode development --dashboard오류가 없고 모든 것이 잘 작동합니다.구축을 시도하여 사용자의 요구했습니다.vue-cli-service build --mode development그리고 그것은 잘 작동해서 생산을 위해 소형화되거나 건설될 때 문제가 있는 것처럼 보입니다.

저는 이것이 2016년의 이 문제와 관련이 있을 것이라고 생각합니다.

업데이트: 여기 내 것입니다.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 Boot 백엔드도 업그레이드했습니까?

저의 경우, 동일한 오류 메시지를 가진 백엔드가 잘못된 Charset-Header를 보내고 있었습니다.Windows에서 내 jar를 시작하여 Linux US-ASCII에서 Header windows-1252를 생성합니다.

저는 제 vertx 기본 문자 집합을 UTF-8로 설정해야 했습니다.봄에 UTF-8 문자 인코딩을 설정하는 방법이 당신의 해결책이 될 수 있습니까?

그렇지 않으면 프런트엔드에 따라 이 https://forum.vuejs.org/t/misplaced-meta-charset-utf-8-fun/55800 이 유용할 수 있습니다.

다시 말하지만, 결국 당신이 브라우저에 잘못된 인코딩을 보내고 있다고 생각합니다.

언급URL : https://stackoverflow.com/questions/54659200/why-am-i-getting-syntaxerror-invalid-range-in-character-class-when-i-upgrade

반응형