Vue CLI 3 应用程序:NPM 构建中未捕获的语法错误
Vue CLI 3 App: Uncaught SyntaxError on NPM Build
我有一个使用 Vue CLI 3 创建的 Vue.js 应用程序。当我 运行 npm run serve
时它启动正常,但是当我尝试构建它时出现错误用于部署 ( npm run build
).
错误是Uncaught SyntaxError: Unexpected token <
。
我发现了几个类似的问题,并且大多数建议的解决方案都围绕着 babel。这是我的 babel.config.js
:
module.exports = {
presets: [
'@vue/app'
]
}
不幸的是,none 的建议解决方案对我有用。我怎样才能正确构建它?
编辑:
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>
我终于想通了。原来是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 创建的 Vue.js 应用程序。当我 运行 npm run serve
时它启动正常,但是当我尝试构建它时出现错误用于部署 ( npm run build
).
错误是Uncaught SyntaxError: Unexpected token <
。
我发现了几个类似的问题,并且大多数建议的解决方案都围绕着 babel。这是我的 babel.config.js
:
module.exports = {
presets: [
'@vue/app'
]
}
不幸的是,none 的建议解决方案对我有用。我怎样才能正确构建它?
编辑:
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>
我终于想通了。原来是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 为我指明了正确的方向。