Vue CLI 3 应用程序：NPM 构建上未捕获的 SyntaxError答案

【问题标题】：Vue CLI 3 App: Uncaught SyntaxError on NPM BuildVue CLI 3 应用程序：NPM 构建上未捕获的 SyntaxError
【发布时间】：2018-11-25 10:22:06
【问题描述】：

我有一个使用 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>

【问题讨论】：

npm、node 和 vue cli 3.x 包版本请
加上您用于创建应用程序的确切命令（我想您刚刚使用了默认预设 babel / eslint，但请指定）。我刚刚创建了一个，它可以工作。
谢谢 - 我在帖子中添加了更多信息。
我更改了我的 NPM/Node 版本以匹配您的版本，我处于相同的测试阶段。我使用完全相同的前缀创建了一个应用程序。我没有那个问题。好像是加载器的问题，你有没有用vue.config.js自定义你的webpack配置？
我们可能在 vue.config.js 中做了一些事情，但我现在不记得确切的更改了。我把上面的代码贴出来了。

标签： javascript vue.js babeljs vue-cli

【解决方案1】：

我最终想通了。原来是网络服务器配置问题。与 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 让我指出了正确的方向。

【讨论】：