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

在尝试用了vue-cli开发项目之后，在项目的最终用npm run build 打包完之后，使用了wamp工具访问打包的文件，但是在页面中显示所有的链接都没有都是404.因此我就查看了index文件中的所有的外部链接。之后我就发现了在index文件里面<!DOCTYPE html><html><head>&

bigfatDone

3324人浏览 · 2018-11-13 17:29:59

bigfatDone · 2018-11-13 17:29:59 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^