【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;
    }
}