我用vue开发的一个小项目，项目开发出雏形，想打包一下放测试，但是我想放测试前自己检查一下经过npm run build打包生成的项目，在本地服务器能不能正常跑，于是，经过网上大哥的帮忙，写了个简易的koa服务器，将打包好的dist文件，放到了服务器上。
说一下我的dist文件的结构，dist/index.html dist/static 然后static目录下有打包好的js css img 文件，里面包含打包好的文件
再说一下koa服务器，服务器入口文app.js 监听的3000 端口， 用localhost:3000 就可以访问到
然后vue.config.js目前没有做任何配置 publicpath的默认值就为“/”
然后我再localhost：3000端口访问 结果页面白屏！！！ network里资源状态码都是200 控制台有报错 如下：
Uncaught SyntaxError: Unexpected token <
蒙圈了有没有！！！ 这是什么错。。。 经过我在网上的查找，估计是引用静态资源路径问题（因为网上很多，说白屏是静态资源路径引起的，然后报的相同的错）
网上也说到过很多，部署时需要配置vue.config.js里面的baseurl的值，但是我用的vue3.70版本 目前最新。官方让舍弃baseurl的配置，用publicpath来代替，于是，我hack了很多中配置方法，都不行。必须的知道哪里路径错了才行，好，现在来看看，空白页network里静态资源的引用路径，如下：
http://localhost:3000/static/css/app.9977a20f.css
发现问题了谬？？？？！！！！
http://localhost:3000是我服务器的根 是相对于koa里app.js的路径 而和app.js同级的是dist文件夹，这里存放着index.html 和statick文件夹 按正常逻辑，这个域要访问到html页面 有两种办法 一是将dist这一层去掉，用上述路径可以访问到index.html和statick文件 二是：
http://localhost:3000/dist/statick/css/app.css 才能正常访问到，于是，我先试了第一种，把dist里的文件都拿了出来，放在了与app.js同级的目录下，然后页面正常显示了。但是我觉的这不是最好的解决办法，我应该在vue中配置，将静态资源的访问路径前加上一个dist 也就是变成第二种访问路径，那么vue.config.js的publicpath该上场了配置如下：
//基本路径(相对于服务器根目录 静态资源的相对路径) publicPath: process.env.NODE_ENV === "production" ? "/haha/" : "/",
然后打包构建，放到服务器，好了，页面出来了！！！！明白了吗？？？
再来看看现在的引用app.css的路径
http://localhost:3000/haha/static2/css/app.9977a20f.css
这样就对了嘛。。
这也更好理解了publicpath的作用
另外想说一些不是太相关的知识（关于路径的）
. :一个点 表示一个级别的目录 ./ 表示当前目录下的目录 ../ 表示上级目录 ../../ 表示上级目录的上级目录 这对配置路径比较有帮助
另外 / 与 ./ 的区别
/ :表示跟目录 是绝对路径
./ :是相对路径 是相对于index.html的路径
具体看下边
/ 网站根路径 ./ 当前路径 ../ 上一级路径 ../../ 上两级路径 例如：本地静态网站 index页面地址 127.0.0.1/bootstrap_test/index.html在这里页面里面引入css和js路径应该怎么写呢? 1、 <link href="css/bootstrap.min.css" rel="stylesheet"> 实际请求地址为：127.0.0.1/bootstrap_test/css/bootstrap.min.css 找的是:和index.html 同级目录下的css文件里面的 2、 <link href="./css/bootstrap.min.css" rel="stylesheet"> 实际请求地址为：127.0.0.1/bootstrap_test/css/bootstrap.min.css 找得是：和index.html 同级里面的css文件里面的 3、 <link href="/css/bootstrap.min.css" rel="stylesheet"> 实际请求地址为：127.0.0.1/css/bootstrap.min.css 找的是根目录下面的css 4、 <link href="../bootstrap_test/css/bootstrap.min.css" rel="stylesheet"> 实际请求地址为：127.0.0.1/bootstrap_test/css/bootstrap.min.css 找得是：index.html上一级也就是和bootstrap_test处于同级里面的css文件里面的
原文地址：https://www.cnblogs.com/fqh123/p/10850311.html