關於用vue-cli打包dist檔案無法在頁面中訪問
阿新 • • 發佈：2019-01-08
在嘗試用了vue-cli開發專案之後，在專案的最終用npm run build 打包完之後，使用了wamp工具訪問打包的檔案，但是在頁面中顯示所有的連結都沒有都是404.
因此我就查看了index檔案中的所有的外部連結。
之後我就發現了在index檔案裡面
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <title>first</title> <link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet> </head> <body> <div id=app></div> <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js> </script> <script type=text/javascript src=/static/js/vendor.2420502e2b2c7f321d64.js> </script> <script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js> </script> </body> </html>
所有的外部連結都是直接用/來連線的，但是這個/ 是預設的主目錄中去
因此,就要在這些的外部檔案的路徑上加上./ 這樣就是在當前的目錄中連線
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <title>first</title> <link href=./static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet> </head> <body> <div id=app></div> <script type=text/javascript src=./static/js/manifest.2ae2e69a05c33dfc65f8.js> </script> <script type=text/javascript src=./static/js/vendor.2420502e2b2c7f321d64.js> </script> <script type=text/javascript src=./static/js/app.b22ce679862c47a75225.js></script> <!-- 這裡是因為沒有加上./導致頁面無法訪問 --> </body> </html>