vue cli - 수집되지 않은 구문 오류:예기치 않은 토큰 <
프로젝트를 작성하다vue-cli 3.0처음에는 정상적으로 동작합니다. 그 <ctrl>-cnpm run serve계속 가 난다, 잘못 던진다 틀리다.
학습되지 않은 구문 오류:예기치 않은 토큰 <
.app.js, 로 < '아까부터'에서 온 거예요.index.html그 에서, 그 과정 어딘가에서,그 과정 중에,webpack ★★★index.html should should should should should should should should should should should should로 app.js.
사용하고 있는 패키지는 다음과 같습니다.
vue 3.0.0-rc.3 @vue/cli-cli-sec-babel ^3.0-156.15 @vue/cli-sec-eslint ^3.0.15 @vue/cli-service ^3.0.0-155.15
어떻게 하면 해결할 수 있을까요?
Update01 전체 삭제node-modules와 ""npm install다시, 그러면 모든 게 정상으로 돌아가는 것 같아요.하지만 왜 이런 일이 일어났는지 아는 사람이 있다면 공유해 주세요.
추가해 보겠습니다.<base href="/" /><head>를 참조해 주세요.효과가 있기를 바랍니다.
인덱스의 src 속성의 상대 경로에 "./" 접두사를 사용했을 수 있습니다. "<%=BASE_URL %>"로 바꾸면 정상적으로 작동합니다.
//<script src="./js/config.js">
<script src="<%= BASE_URL %>js/config.js">
이 "./" 사용으로 인해 일반 Vue 라우팅에서는 문제가 발생하지 않지만 동적 경로 매칭({ path: /user/:id)'을 구현하는 경우 구성 요소: 사용자 }) 접두사가 "./"인 index.html의 참조가 예상대로 작동하지 않습니다.
가 Vue 파일 폴더 입니다. 예를 들어, Vue 파일 구조는 Vue 파일 폴더와 .
user/js/config.js
루트에 루트 파라미터가 있는 경우에도 이 구조는 동일합니다(다이나믹 루트 매칭이 실장되어 같은 Vue 컴포넌트(User.vue)를 사용하고 있기 때문에 http://yourdomain.com/user/1234)).
이 때 "."는 사용자/1234/js/config.js를 가리킬 수 있으므로 기본 404 페이지로 이동하며 "< html >"로 시작하는 HTML 파일이기 때문에 "Uncatched SyntaxError: 참조된 파일의 행 1에 예기치 않은 토큰 <" 가 있습니다.
저도 같은 문제가 있었습니다.노드 모듈을 분리하여 npm 설치를 다시 시도했지만 소용이 없었습니다.
사이트 데이터를 모두 삭제한 것이 효과가 있었습니다.(Chrome에서) 개발 탭(Ctrl+Shift+i)을 열고 '애플리케이션' 탭으로 이동한 다음 측면 패널에서 "스토리지 지우기"를 클릭하고 "사이트 데이터 지우기" 버튼을 클릭하면 됩니다.
제 추측으로는 요청을 가로채 app.js가 아닌 html 파일을 제공하는 오래된 서비스 워커가 제게 남아 있었던 것 같습니다.따라서 이전에 "http://localhost:8080"이라는 URL에서 PWA를 사용한 적이 있는 경우 문제가 해결될 수 있습니다.
// vue.config.js
module.exports = {
publicPath: '/',
};
실제로 vue.config.js 파일에 publicPath를 추가하려고 합니다.
http://example.com에서 애플리케이션을 도입하면 https://stackoverflow.com/a/56320964/1321009이 동작합니다.
http://example.com/something 에서 전개한 경우
도입할 때 변경하셔야 합니다.단순히 말씀드리면 번거롭습니다.
vue.config.filename 파일을 사용하여 다음과 같이 설정합니다.
// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/something/'
: '/'
};
저도 같은 문제가 있어요.index.html 파일에는 다음과 같이 스크립트 태그를 씁니다.
<script src="./static/js/qrcode.min.js"></script>
src 특성을 다음과 같이 변경할 경우:
<script src="/static/js/qrcode.min.js"></script>
ok, '예상치 않은 토큰 <' 오류는 없습니다.
여기 또 다른 문제가 발생했습니다, 그것은 나를 화나게 합니다.
온라인 빌드 제품 테스트 즉시 이 사이트에 접속하여 리소스를 얻을 수 없습니다.OMG! OK, 이 src를 다시 이렇게 변경합니다.
<script src="./static/js/qrcode.min.js"></script>
그런 다음 vue.config.config.config를 다음과 같이 변경합니다.
baseUrl:'./'
assetsDir:'./'
그래서, 모든 것이 정상이지만, 내 로컬 프로젝트에서는 이 오류가 발생할 것입니다.
마침내, 나는 이것을 발견한다:
온라인 URL 주소: http://xxxxx.cn/test0001/#/
로컬 URL 주소:http://192.168.5.108:9000/test0001/#/
(ps: test0001 파라미터는 삭제할 수 없습니다.프로젝트에 필요합니다)
이 파라미터 'test0001'을 삭제하면 로컬프로젝트 테스트에 이 오류가 표시되지 않습니다.
빌드 환경과 개발 환경의 차이로 인해 이 오류가 발생한 것 같습니다.또한 제 파라미터는 url 주소의 test0001 입니다.
마지막으로, 나는 이 제품과 그것을 해결하기 위해 개발을 하기 위해 파라미터를 사용한다.
만약 누군가 나처럼 이 문제를 만난다면, 당신의 해결책을 공유해 주세요.
두 CLI를 모두 제거하고 Chrome에서 V3 + A '하드' 새로 고침을 다시 설치하면 문제가 해결되었습니다.하드 리프레시만으로 충분할 수 있다(CTRL + F5)
that that that that that that that that that that that that that that that that that that that에서 사용한 것과 같은 vue ui ★★★★★★★★★★★★★★★★★」vue create로젝젝 츠요시
그런 다음 새 콘솔 인스턴스를 열고 이 인스턴스에서 프로젝트를 실행하십시오.
제 경우 첫 번째 콘솔의 지나치게 왜곡된 환경변수에 문제가 있었습니다.
행운을 빈다!
vue ui를 실행하려고 할 때 이 오류가 발생했습니다.이 문제는 vue cli 2.0을 3.0과 함께 설치했을 때 발생했습니다.
그래서 둘 다 제거하고 3.0을 설치한 후 다음을 수행합니다.
캐시를 비우고 크롬으로 하드 새로고침만 하면 됩니다.
f12 키를 눌러 개발자 도구를 열고 새로 고침 버튼을 클릭한 다음 빈 현금 및 하드 새로고침을 선택합니다.
이것이 당신의 구체적인 문제와 관련이 있는지 잘 모르겠습니다.
app.js의 첫 번째 줄에서 오류가 발생했음을 나타내지만 콘솔에서 실제로 index.html에서 <을(를)즉, 그 과정 중 어딘가에서 webpack think index.html은 app.js로 전치되어야 합니다.
제 경우는 정반대입니다.url 개서 문제를 추가합니다.js 및 css 자산이 index.html로 리다이렉트된 규칙이 매우 광범위하기 때문에 js 또는 css 파일의 선두에 <를 추가합니다.
이 경우에도 백엔드(Java Spring 및 javax)에 문제가 있습니다.urlrewrite를 필터해 주세요).따라서 도움이 될 수 있다면 urlrewrite.xml의 올바른 부분을 다음에 나타냅니다.
<rule match-type="wildcard">
<from>/assets/**</from>
<to last="true">-</to>
</rule>
<rule match-type="wildcard">
<from>/index.html</from>
<to last="true">-</to>
</rule>
<rule match-type="wildcard">
<from>/**</from>
<to>/index.html</to>
</rule>
javascript 파일을 index.html에 링크하려고 했을 때도 같은 오류가 발생하였습니다.
설정:장고(백엔드) - Vue(프런트엔드) - Daphne - Nginx.
Django urls.py index . d d d 。은 javascript를 통해 .{% include "path" %}츠키노 괄호 가 있기 를 '{}}}'으로 .['[[', ']]'](). (main.js를 참조해 주세요.
vuejs/index.filename:
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
[[name]]
</div>
<script>
{% include "vuejs/src/main.js" %}
</script>
</body>
</html>
vuejs/src/main.disc:
new Vue({
delimiters: ['[[', ']]'],
el: '#vue-app',
data: {
name: 'Vodka Gorbatschow',
}
});
Vue CLI 3.10을 사용하여 Azure Web 서버의 서브 디렉토리에 전개했을 때도 같은 문제가 있었습니다.이 에러의 원인이 된 루팅을 이력 모드에서 해시 모드로 변경할 때까지, 사이트에는 문제가 없었습니다.
index.html 페이지의 링크를 변경하여 작업을 진행했습니다.
배포 빌드는 다음과 같은 이점을 제공합니다.
<link href=/css/chunk-095570c7.ceb55529.css rel=prefetch>
...하지만 작동하려면 다음과 같이 변경해야 했습니다...
<link href="css/chunk-095570c7.ceb55529.css" rel=prefetch>
Vue CLI 3에서 이 오류가 랜덤하게 발생하였습니다.serve+ (CLI) 4.1 (CLI (CLI)
(이벤트)는 )Disabled Cache inspection tools 이 .Cache Storage:
열다.Inspection Tools>Application(탭) >Cache Storage(트리) > 우클릭Delete로 끝나는 라벨이 있는 엔트리에http://localhost:8080.
오른쪽 클릭을 시도하지 않았습니다.Cache Storage>Refresh Caches, 또한 작동할까요?
이 문제가 실가동 중에 발생하고 있는 경우는, 이 문제에 대한 해답이 아닙니다.이 문제를 해결하는 방법을 모르는 최종 사용자를 위해서, 다른 방법으로 앱의 기능을 확실히 할 필요가 있습니다.
저도 같은 문제가 있었어요.저는 '자산'을 추가하여 해결합니다.
<script src="{{ asset('js/app.js') }}" defer></script>
여기서도 같은 에러가 발생했습니다.어플리케이션을 도입할 때 일어난 일이기 때문에 로컬 환경에서 정상적으로 동작합니다.
검색한 후 vue-cli의 공식 지침을 따랐습니다.publicPath이하에 나타냅니다.
GitHub Pages 등의 서브 패스로 사이트를 전개하는 경우는, public Path 를 설정할 필요가 있습니다.사이트를 https://foo.github.io/bar/, 에 전개하는 경우는, public Path 를 「/bar/」로 설정할 필요가 있습니다.대부분의 경우 '/'을(를) 사용하십시오!!!상세: https://cli.vuejs.org/config/ #public path
나는 변한다publicPath'/'에서 '/bar/'로 이동하면 오류가 사라집니다.
Vue 3 애플리케이션을 도입하려고 할 때도 같은 문제가 발생했습니다.모든 파일이 200개의 상태로 되어 있는 것처럼 보였지만 실제로는 모든 파일의 index.html 페이지에 불과했습니다.브라우저는 .js 또는 .css 파일을 가져올 것으로 예상되지만 시작은 다음과 같습니다.<html><head>...기타.그 때문에, 에러 「뜻밖의 토큰」이 표시되었습니다.이러한 파일에 정적 경로를 제공하여 수정했습니다.
app.use(express.static(__dirname + "/dist"));
app.get("*", function(req, res) {
res.sendFile(__dirname + "/dist/index.html");
});
URL을 주소 표시줄에 입력하면 파일이 올바르게 다운로드되었는지 확인할 수 있습니다.브라우저에 콘텐츠가 올바르게 표시되어야 합니다.빈 페이지가 표시되면 네트워크 탭에 200개의 상태가 표시되더라도 다른 항목이 표시됨을 의미합니다.
위의 셋업도 사용했는데 갑자기 같은 에러가 발생했습니다(Mac을 재기동하면 이상하게 들리지만 패키지 업데이트는 더 오래 전입니다).
// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/something/'
: '/'
};
'/'를 ''로 변경한 후 모든 것이 정상적으로 작동했습니다.
Vue Js를 사용하여 싱글 페이지 애플리케이션을 만들 때도 마찬가지였습니다.
내가 알아차린 것은 그것이 올바른 부분을 가리키고 있지 않다는 것이다.파일이 없습니다.static/Js 폴더에 파일이 있는지 확인하세요.
또는 포인터를 확인하여 올바른 파일을 가리키고 있는지 확인하십시오.
파일 내vue.config.js, 다음 사항을 확인합니다.
module.exports = {
publicPath: '/',
};
언급URL : https://stackoverflow.com/questions/51210795/vue-cli-uncaught-syntaxerror-unexpected-token
'source' 카테고리의 다른 글
| Gradle 인수에 대한 메서드 컴파일()을 찾을 수 없습니다. (0) | 2022.08.31 |
|---|---|
| GCC에서 생성된 asm은 어떻게 컴파일합니까? (0) | 2022.08.31 |
| 목록/어레이 목록 정렬 방법 (0) | 2022.08.31 |
| JPA에서 발행한SQL 쿼리를 표시하는 방법 (0) | 2022.08.31 |
| javadoc에서 메서드 파라미터에 참조를 추가하는 방법 (0) | 2022.08.31 |