发表新帖
发表新帖

vue cli - Uncaught SyntaxError: Unexpected token <

前端 未结
关注
14 2165
说谎
说谎 2020-12-31 03:39

I create my project with vue-cli 3.0. Initially it runs ok. But after I -c then npm run serve again, it keep throwing erro

相关标签:
14条回答
  • 南方客
    2020-12-31 04:06

    I got this error when I tried to run vue ui. This happened when I installed vue cli 2.0 along with 3.0.

    So i uninstalled both and installed 3.0 and then:

    All I had to do was a empty cache and hard reload in chrome.

    Open up the developer tools by pressing f12 and then click and hold the refresh button then select empty cash and hard reload.

    I am not sure if this is related to your specific issue.

    0 讨论(0)
  • 伪装坚强ぢ
    2020-12-31 04:07

    You might have used "./" prefix for Relative path in src attributes of your index.html, Just replace it with "<%= BASE_URL %>" and it will work fine. 

    //<script src="./js/config.js">
<script src="<%= BASE_URL %>js/config.js">

    This "./" usage won't cause any problems with normal Vue Routing but when you are implementing Dynamic Route Matching ({ path: '/user/:id', component: User }) your references in the index.html with "./" prefix won't work as expected!

    This is because Vue file structure will place your dependencies inside your route folder like

    user/js/config.js

    This structure will be the same, Even when your route has route params (http://yourdomain.com/user/1234) since you have Dynamic Route Matching implemented and using the same Vue component (User.vue).

    At this time, "./" might point for user/1234/js/config.js so it ends up going to a default 404 page and it's an HTML file that starts with "< html >", so you are getting "Uncaught SyntaxError: Unexpected token <" in line 1 of your referenced file.

    0 讨论(0)
  • 不思量自难忘°
    2020-12-31 04:07

    I met the same error here, it's just my case happened when I deploy the app, it works good on local env.
    After some search, I followed vue-cli's official guidance on publicPath below:

    You will need to set publicPath if you plan to deploy your site under a sub path, for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/, then publicPath should be set to "/bar/". In most cases please use '/' !!! Detail: https://cli.vuejs.org/config/#publicpath

    I change publicPath from '/' to '/bar/' and the error disappears.

    0 讨论(0)
  • 终归单人心
    2020-12-31 04:08

    I had the same error when I tried to link the javascript file to the index.html.

    Configuration: Django (Backend) - Vue (Frontend) - Daphne - Nginx.

    Django urls.py routes each connection (except prior defined ones e.g. API) to the index.html through a defined view to 'vuejs/index.html'. The javascript file needs to be incorporated through {% include "path" %} and gets rendered through Django. The double curly braces {{}} mean something to Django, which is the reason why the delimiters need to be changed to ['[[', ']]'] inside the Javscript file (see main.js).

    vuejs/index.html:

    <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.js:

    new Vue({
delimiters: ['[[', ']]'],
el: '#vue-app',
data: {
name: 'Vodka Gorbatschow',
}
});
    0 讨论(0)
  • 情书的邮戳
    2020-12-31 04:09

    I had the same issue when deploying to a sub directory on our Azure web server using Vue CLI 3.10. Our site was fine until we changed the routing from history to hash mode which caused this error.

    I had to change the links in the index.html page to get it working.

    The deployment build gives you this...

    <link href=/css/chunk-095570c7.ceb55529.css rel=prefetch>

    …but we had to change it to the following for it to work...

    <link href="css/chunk-095570c7.ceb55529.css" rel=prefetch>
    0 讨论(0)
  • 忘掉有多难
    2020-12-31 04:18

    it indicate that the error happened at the first line of app.js, but I check in console the < is actually from index.html. Which means somewhere along the process, the webpack thought index.html should be transpile as app.js.

    In my case it was the contrary : I add an url rewrite issue. A to much broad rule made that my js and css assets were redirected to index.html, that's why I add a < at the beginning of my js or css files.

    So if it's also the case for you, the problem is in your backend (Java Spring and javax.Filter for the urlrewrite for me). So if it can help someone, here's the correct part of 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>
    0 讨论(0)
 看不清?
提交回复
热议问题