我有一个使用Vue CLI 3创建的Vue.js应用程序 . 当我运行 npm run serve
时,它启动正常,但是当我尝试构建它以进行部署( npm run build
)时,我收到错误 .
错误是 Uncaught SyntaxError: Unexpected token <
.
我发现了几个类似的问题,大多数建议的解决方案都围绕着巴贝尔 . 这是我的 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>
1 回答
我最终想出来了 . 结果是一个Web服务器配置问题 . 与babel或vue-cli模板无关 .
在我的server.js文件中,我有以下几行来提供我的文件:
第一行导致错误 . 我改成了:
一切正常!非常感谢ippi让我指出了正确的方向 .