Vue中的坑Vue打包上传线上报Uncaught SyntaxError: Unexpected token <

Posted cap-rq

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中的坑Vue打包上传线上报Uncaught SyntaxError: Unexpected token <相关的知识,希望对你有一定的参考价值。

今天在vue打包上传线上后,报一下错误,一下就懵了,这可咋整啊,一如既往的想都没想就开始复制错误,上网开搜

Uncaught SyntaxError: Unexpected token <
Uncaught SyntaxError: Unexpected token <
Uncaught SyntaxError: Unexpected token <

 

网上搜的大致有几种

     1.因为vue在打包上传的时候不会编译es6,需要安装babel来将es6转成es5 。

     2.在经过build/webpack.prod.conf.js打包后的JS文件hash值会有变更,因为每次更新代码到线上都会删除旧的dist目录,将最新的dist目录copy上传提供后台更新. 在更新代码的这个过程用户停留在页面上,当用户在更新完后重新操作就会导致报错,点击查看详细 。

 

这些方法都是过了,还是没有解决问题,没办法,只能自己在研究了。

 

在以上方法都不管用的情况下只能看下nginx配置了,配置如下:

location / {
    proxy_pass http://localhost:8082;
    #try_files $uri $uri/ =404;
    try_files $uri $uri/ /index.html;
}

可以看到,当出错的时候会强制跳转到 index.html 页面,而js文件是不会识别html,因此报Uncaught SyntaxError: Unexpected token < 错误

 

nginx实现静态文件分发配置如下:

server {
    listen 100;
    listen [::]:100;
    server_name 127.0.0.1;
    location / {
        root /var/www/website/endfront/dist/;   
        index index.html;
        #roxy_pass  http://localhost:8083;
        #try_files $uri $uri/ =404;
        try_files $uri $uri/ /index.html;
    }
}

 

以上是关于Vue中的坑Vue打包上传线上报Uncaught SyntaxError: Unexpected token <的主要内容,如果未能解决你的问题,请参考以下文章

Vue 打包后报错 Uncaught TypeError: Cannot redefine property: $router

Vue 打包后报错 Uncaught TypeError: Cannot redefine property: $router

Vue.js学习—— vue-cli初始化项目的坑终极解决办法和总结(离线安装webpack下载模板)

vue cli3 打包到tomcat上报错问题

EasyNTD线上报错“Uncaught TypeError”该如何解决?

EasyNTD线上报错“Uncaught TypeError”该如何解决?