Vue+koa2 打包启动本地服务器-资源加载问题

记录一下,通过vue+koa2 启动一个本地服务器加载你的打包后网站, 主要目的是打通, 这里借助几个脚手架来帮助我们搭建项目, 具体网页你自己实现

主要技术栈

koa2 + vue

具体cli

koa-generator + vue-cli3

koa2 --version => 1.1.17
node --version => v12.9.0
vue --version => @vue/cli 4.0.5

记录一下从 打包vue前端页面 以及 koa2 启动本地服务, 加载vue静态页面后, 遇到的字体/图片/等资源加载不了的问题

问题1: vue打包后本地打开网页白屏

打包vue项目后, 直接本地打开dist目录下的index.html, 浏览器白屏的问题

解决方式:

在vue.config.js 配置文件中, 默认的

publicPath:'/'

需要改成

  // 基本路径
    publicPath: './', //注意新版本这里改成了publicpath

问题2: vue打包后本地打开网页部分图片/字体丢失

打包vue项目后, 直接本地打开dist目录下的index.html, 部分资源不能加载, 比如我这里的一些字体

这里 是因为本地模式不支持 file:// 模式, 需要我们启动http服务来加载网页, 那么来吧~

问题3: koa2本地服务器访问网页如何实现?

通过 koa-generator 创建koa2服务器以后, 仅需要将dist放入public文件夹下,
并借助 koa-static 中间件来加载静态资源即可
当然注意一点, 文件路径写法不是绝对的, 但你要保证静态资源的路径能够被加载到!

app.use(require('koa-static')(__dirname + '/public/dist'))

如果你这样配置

app.use(require('koa-static')(__dirname + './public/dist'))

那么路径就有问题 比如 xxx/xxxx/xxx/.public/dist 这显然不对
所以这里不要加 点
而且, 一旦koa-static 加载不到你的静态资源及网页, 那么路由就会被转到 koa-router 里面设置的内容, 那就是另外一个故事了,这里不去细讲