Приложение Vue CLI 3: необработанная ошибка синтаксиса в сборке NPM

1

У меня есть приложение Vue.js, созданное с помощью Vue CLI 3. Он запускается нормально, когда я запускаю npm run serve, но я получаю сообщение об ошибке при попытке его создания для развертывания (npm run build).

Ошибка: Uncaught SyntaxError: Unexpected token <.

Я нашел несколько похожих вопросов, и большинство предлагаемых решений сосредоточились вокруг babel. Вот мой babel.config.js:

module.exports = {
  presets: [
    '@vue/app'
  ]
}

К сожалению, ни один из предложенных решений не работал для меня. Как я могу получить это, чтобы построить правильно?

Редактировать:

Версия NPM: 5.5.1 Версия узла: 8.9.0 Vue CLI: v3.0.0-beta.15

Точной командой для создания приложения было vue create my-app, и я выбрал vue-router, vuex, sass, babel, typescript, unit-jest, e2e-nightwatch.

Vue.config.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
  lintOnSave: false,
    baseUrl: '/en-us/credit-application/v2',
    outputDir: '/dist/public',
    configureWebpack: {
        devServer: {
            disableHostCheck: true,
            host: '0.0.0.0',
            publicPath: '/en-us/credit-application/v2',
            openPage: 'en-us/credit-application/v2',
            open: true,
            historyApiFallback: true
        },
        plugins: [
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        ]
    }
};

Ошибки:

Я получаю два в консоли.

Uncaught SyntaxError: Unexpected token < chunk-vendors.61f2fa0f.js:1

Uncaught SyntaxError: Unexpected token < app.acdc6caf.js:1

chunk-vendors.js ведет к этому файлу:

<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel=stylesheet><title>Credit Application</title><link as=style href=/en-us/credit-application/v2/css/app.847b19ee.css rel=preload><link as=style href=/en-us/credit-application/v2/css/chunk-vendors.95fb3ceb.css rel=preload><link as=script href=/en-us/credit-application/v2/js/app.acdc6caf.js rel=preload><link as=script href=/en-us/credit-application/v2/js/chunk-vendors.61f2fa0f.js rel=preload><link href=/en-us/credit-application/v2/css/chunk-vendors.95fb3ceb.css rel=stylesheet><link href=/en-us/credit-application/v2/css/app.847b19ee.css rel=stylesheet></head><body><noscript><strong>We're sorry but the Credit Application doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script type=text/javascript src=/en-us/credit-application/v2/js/chunk-vendors.61f2fa0f.js></script><script type=text/javascript src=/en-us/credit-application/v2/js/app.acdc6caf.js></script></body></html>

app.acdc6caf.js приводит к следующему:

<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel=stylesheet><title>Credit Application</title><link as=style href=/en-us/credit-application/v2/css/app.847b19ee.css rel=preload><link as=style href=/en-us/credit-application/v2/css/chunk-vendors.95fb3ceb.css rel=preload><link as=script href=/en-us/credit-application/v2/js/app.acdc6caf.js rel=preload><link as=script href=/en-us/credit-application/v2/js/chunk-vendors.61f2fa0f.js rel=preload><link href=/en-us/credit-application/v2/css/chunk-vendors.95fb3ceb.css rel=stylesheet><link href=/en-us/credit-application/v2/css/app.847b19ee.css rel=stylesheet></head><body><noscript><strong>We're sorry but the Credit Application doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script type=text/javascript src=/en-us/credit-application/v2/js/chunk-vendors.61f2fa0f.js></script><script type=text/javascript src=/en-us/credit-application/v2/js/app.acdc6caf.js></script></body></html>
  • 0
    npm, версия пакета узла и vue cli 3.x пожалуйста
  • 0
    Плюс точная команда, которую вы использовали для создания приложения (я полагаю, вы использовали стандартные пресеты babel / eslint, но, пожалуйста, укажите). Я просто создал один, и он работает.
Показать ещё 10 комментариев
Теги:
vue.js
vue-cli
babel

1 ответ

0
Лучший ответ

В конце концов я понял это. Это оказалось проблемой конфигурации веб-сервера. Ничего общего с babel или шаблоном vue-cli.

В моем файле server.js у меня были следующие строки для обслуживания моих файлов:

let staticPath = path.posix.join('/en-us/credit-application/v2', 'public');
app.use(staticPath, express.static(path.join(__dirname + '/public')));
app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname+'/public/index.html'))
});

Первая строка вызывала ошибку. Я изменил его на:

let staticPath = path.posix.join('/en-us/credit-application/v2');

Все работает! Большое спасибо иппи, который заставил меня указывать в правильном направлении.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню