Vue打包静态资源本地访问（不用放在服务端）| 比如放在Android 应用中

解决vue打包静态资源问题！一、打包服务端访问资源，直接build就行了二、打包成静态资源，build出问题啦！！一、打包服务端访问资源，直接build就行了打包成服务器访问的资源，是默认的打包方式，直接运行自带脚本npm run build,就可以将资源打包在dist目录下打包好之后的文件为dist目录下的：static与index.html打包完之后直接扔服务器上就行了，直接运行二、打

汪随安

7182人浏览 · 2021-05-13 17:31:36

汪随安 · 2021-05-13 17:31:36 发布

解决vue打包静态资源问题！

- 一、打包服务端访问资源，直接build就行了
- 二、打包成静态资源，build出问题啦！！

一、打包服务端访问资源，直接build就行了

打包成服务器访问的资源，是默认的打包方式，直接运行自带脚本npm run build,就可以将资源打包在dist目录下
在这里插入图片描述
打包好之后的文件为dist目录下的：static与index.html

打包完之后直接扔服务器上就行了，直接运行

二、打包成静态资源，build出问题啦！！

使用场景：
好比我写的是H5应用，放在浏览器上直接可以打开浏览，压根没用到后台服务，我再找个服务程序跑这个静态页面，是不是有点大材小用了
怎么解决呢？先看看原始打包好之后访问的都是啥？

直接打开index.html，发现一片空白，别急，打开调试界面看看

发现这些css与js文件找不到，查找的路径是从c盘下面去找，这路径。。。把东西放在C盘下？可以是可以，但肯定不优雅，是吧

在去看看打包好之后的index.html里面的东西是啥？

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>androidvuejs</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.00d360f7b37e02379b40.js></script>
<script type=text/javascript src=/static/js/app.5c58753d836efece630f.js></script>
</body>
</html>

大眼一扫，发现只有一堆链接，全部去找css文件与js文件，而且路径为/，也就是从根目录找起，也就是说如果打包好的静态资源不是放在服务程序上跑的情况下，他是去从c盘目录下去找静态资源，如果在服务程序上跑，则是去服务程序的资源路径查找。
问题发现了，如何解决呢？？

简单粗暴点：我直接把这些/手动改成./，也就是当前路径
手动改完之后如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>androidvuejs</title>
  <link href=./static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script>
<script type=text/javascript src=./static/js/vendor.00d360f7b37e02379b40.js></script>
<script type=text/javascript src=./static/js/app.5c58753d836efece630f.js></script>
</body>
</html>

然后打开index.html，发现确实访问成功啦，打开控制台一看，css与js文件也都找到啦
在这里插入图片描述
问题到此就解决了，但是！每次手动改，感觉也不是很优雅，手动比较没有全自动舒服是吧！

于是乎，我感觉，从node打包静态资源的脚本上，应该可以解决打包路径方式
node打包脚本在config 文件下的index.js中的build 中进行配置
然后我大眼一扫就发现了，打包路径配置属性： assetsPublicPath: '/',好家伙，果断把/改为./，然后执行build进行打包

好家伙！问题非常优雅的解决啦！

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}$/, //不连续的两位字母// /^