Vue CLI 3應用：NPM構建上未捕獲的SyntaxError

Question

我有一個使用Vue CLI 3創建的Vue.js應用程序。當我運行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>

Answer 1

我最終想通了。 原來是Web服務器配置問題。 與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');

一切正常！ 非常感謝ippi ，他使我指出了正確的方向。

Vue CLI 3應用：NPM構建上未捕獲的SyntaxError

問題描述

1 個解決方案

解決方案1
0 已采納 2018-06-21 21:17:09

Vue CLI 3應用：NPM構建上未捕獲的SyntaxError

問題描述

1 個解決方案

解決方案1 0 已采納 2018-06-21 21:17:09

解決方案1
0 已采納 2018-06-21 21:17:09