Vue cli - Uncaught SyntaxError: Неожиданный токен <
Я создаю свой проект на vue-cli 3.0. Первоначально все работает нормально. Но после того, как я снова <ctrl>-c, затем снова npm run serve, он продолжает выдавать ошибку:
Uncaught SyntaxError: Unexpected token <
это означает, что ошибка произошла в первой строке app.js, но я проверяю в консоли, что < на самом деле от index.html. Это означает, что где-то в процессе webpack считал, что index.html должен быть транспилирован как app.js.
Ниже приведены пакеты, которые я использую:
vue 3.0.0-rc.3 @ vue / cli-plugin-babel ^ 3.0.0-beta.15 @ vue / cli-plugin-eslint ^ 3.0.0-beta.15 @ vue / cli-service ^ 3.0.0-beta.15
Как я могу это решить?
Обновление01
Я удаляю всю папку node-modules и снова npm install, потом вроде все снова работает нормально. Но если у кого-то есть идеи, почему это произошло, поделитесь, пожалуйста.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 14
Я предполагаю, что вы используете то же окно консоли, которое использовали для vue ui или vue create для запуска проекта?
Затем попробуйте открыть новый экземпляр консоли и запустить в нем свой проект.
В моем случае это сработало, и проблема заключалась в перезаписи переменной окружения в первой консоли.
Удачи тебе!
У меня была та же проблема, я попытался удалить модули узлов и снова установить npm, но это не сработало.
Что действительно помогло, так это удаление всех данных сайта. Вы можете сделать это (в Chrome), открыв вкладку разработки (Ctrl + Shift + i), перейдите на вкладку «Приложение», нажмите «Очистить хранилище» на боковой панели и нажмите кнопку «Очистить данные сайта».
Я предполагаю, что у меня все еще был какой-то старый сервис-воркер, который перехватил запрос и предоставил html-файл вместо app.js. Так что, если вы раньше использовали PWA по URL-адресу «http: // локальный: 8080», это может решить проблему.
У меня та же проблема. в файле index.html я просто пишу этот тег скрипта, например:
<script src = "./static/js/qrcode.min.js"></script>
если я изменю src attr следующим образом:
<script src = "/static/js/qrcode.min.js"></script>
ок, нет ошибки "Неожиданный токен <" отображается.
вот произошла еще одна проблема, меня это расстраивает.
онлайн-тесты продукта сборки, которые показывают, что я не могу получить доступ к этому сайту и получить ресурс. МОЙ БОГ ! хорошо, я снова меняю этот src вот так:
<script src = "./static/js/qrcode.min.js"></script>
а затем внесите некоторые изменения в vue.config.js, например:
baseUrl:'./'
assetsDir:'./'
Итак, в сети все в порядке, но при запуске моего локального проекта возникает эта ошибка.
наконец, я нахожу это:
онлайн-адрес URL: http://xxxxx.cn/test0001/#/
локальный URL-адрес: http://192.168.5.108:9000/test0001/#/
(ps: параметры test0001 удалить нельзя, это нужно моему проекту)
если я удалю этот параметр test0001, эта ошибка не будет отображаться в моем локальном тесте проекта.
Я предполагаю, что разница в среде сборки и разработки вызывает эту ошибку, и мои параметры test0001 в URL-адресе.
наконец, я просто использую параметр, чтобы различать этот продукт, и разработку, чтобы решить эту проблему.
если кто-то встретит эту проблему, как я, поделитесь, пожалуйста, своим решением.
Чтобы получить полезный ответ, эту реакцию нужно расширить. Объясните, почему это ответ на вопрос.
У меня возникла эта ошибка при попытке запустить vue ui. Это произошло, когда я установил vue cli 2.0 вместе с 3.0.
Итак, я удалил оба и установил 3.0, а затем:
Все, что мне нужно было сделать, это очистить кеш и полностью перезагрузить Chrome.
Откройте инструменты разработчика, нажав f12, а затем нажмите и удерживайте кнопку обновления, затем выберите пустые деньги и жесткую перезагрузку.
Я не уверен, связано ли это с вашей конкретной проблемой.
Удаление обоих интерфейсов командной строки и переустановка V3 + «жесткое» обновление в Chrome сделали свое дело. Может быть, достаточно одного жесткого обновления (CTRL + F5)
Попробуйте добавить <base href = "/" /> в <head> вашего index.html. Надеюсь, это сработает.
Не могли бы вы рассказать, почему это работает?
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.
В моем случае все было наоборот: я добавляю проблему с перезаписью URL. Согласно очень широкому правилу, мои ресурсы js и css перенаправлялись на index.html, поэтому я добавляю <в начало файлов js или css.
Так что, если это так и для вас, проблема в вашем бэкэнде (Java Spring и javax.Filter для 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.
Конфигурация: Django (Backend) - Vue (Frontend) - Daphne - Nginx.
Django urls.py направляет каждое соединение (кроме определенных ранее, например, API) в index.html через определенное представление в 'vuejs / index.html'. Файл javascript должен быть включен через {% include "path" %} и визуализирован через Django. Двойные фигурные скобки {{}} что-то значат для Django, поэтому в файле Javscript необходимо изменить разделители на ['[[', ']]'] (см. Main.js).
vuejs / index.html:
<html>
<head>
<meta charset = "utf-8">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/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',
}
});
Возможно, вы использовали префикс "./" для относительного пути в атрибутах src вашего index.html, просто замените его на "<% = BASE_URL%>", и он будет работать нормально.
//<script src = "./js/config.js">
<script src = "<%= BASE_URL %>js/config.js">
Это использование "./" не вызовет никаких проблем с нормальной маршрутизацией Vue, но когда вы реализуете Динамическое сопоставление маршрутов({путь: '/ пользователь /: идентификатор', компонент: Пользователь}), ваши ссылки в index.html с префиксом "./" не будут работать должным образом!
Это связано с тем, что файловая структура Vue поместит ваши зависимости в папку маршрута, например
user/js/config.js
Эта структура будет такой же, даже если ваш маршрут имеет параметры маршрута (http://yourdomain.com/user/1234), поскольку у вас реализован Динамическое сопоставление маршрутов и используется тот же компонент Vue (User.vue).
В это время "./" может указывать на пользователь / 1234 / js / config.js, поэтому в конечном итоге он переходит на страницу 404 по умолчанию, и это HTML-файл, который начинается с "<html>", поэтому вы получаете «Неперехваченная SyntaxError: неожиданный токен <» в линия 1 вашего ссылочного файла.
У меня была такая же проблема при развертывании в подкаталог на нашем веб-сервере Azure с помощью Vue CLI 3.10. Наш сайт был в порядке, пока мы не изменили маршрутизацию с истории на режим хеширования, который вызвал эту ошибку.
Мне пришлось изменить ссылки на странице index.html, чтобы она заработала.
Сборка развертывания дает вам это ...
<link href=/css/chunk-095570c7.ceb55529.css rel=prefetch>
... но нам пришлось изменить его на следующий, чтобы он заработал ...
<link href = "css/chunk-095570c7.ceb55529.css" rel=prefetch>
Попадание в эту ошибку случайным образом с Vue CLI 3 с использованием serve + версии 4.1 со всеми плагинами CLI.
Событие, хотя у меня включен Disabled Cache в веб-браузерах inspection tools, мне пришлось решить эту проблему для локальной разработки, очистив Cache Storage:
Откройте Inspection Tools> Application (вкладка)> Cache Storage (дерево)> Щелкните правой кнопкой мыши Delete на записи, метка которой заканчивается на http://localhost:8080.
Я не пробовал Щелкните правой кнопкой мыши на Cache Storage> Refresh Caches, может также работать?
If you are having this issue in production, this is not the answer for you, you need to resolve this in some other manner to ensure your app functions for your end users who wont know to do this...
// vue.config.js
module.exports = {
publicPath: '/',
};
Вы действительно хотите добавить publicPath в свой файл vue.config.js
https://stackoverflow.com/a/56320964/1321009 работает, если ваше приложение развернуто в http://example.com
Если вы развернули его на http://example.com/something
Затем вам нужно будет зайти и изменить его при развертывании, что, мягко говоря, раздражает.
с файлом vue.config.js просто установите его так
// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/something/'
: '/'
};
У меня такая же проблема. Для меня я решаю это, добавляя «актив»
<script src = "{{ asset('js/app.js') }}" defer></script>
Я встретил здесь ту же ошибку, это просто мой случай произошел, когда я развертываю приложение, оно хорошо работает на локальном env.
После некоторого поиска я последовал официальному руководству vue-cli по publicPath ниже:
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
Я меняю publicPath с '/' на '/ bar /', и ошибка исчезает.
Я использую только
vue create, и он находится на другой консоли.