关于用vue-cli打包dist文件无法在页面中访问

最新推荐文章于 2023-10-09 17:51:30 发布

bigfatDone

最新推荐文章于 2023-10-09 17:51:30 发布

阅读量3.3k

点赞数

分类专栏： vue 文章标签： vue vue-cli dist

本文链接：https://blog.csdn.net/bigfatDone/article/details/84032467

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在尝试用了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>