node+koa启动vue3.0打包项目

前言

打包完成的访问静态资源会报no found错误，通过启动node服务处理no found问题

1、创建node服务文件

image.png

2、文件内容

const fs = require('fs')
const path = require('path')
const Koa = require('koa')

const app = new Koa()

app.use(async ctx => {
  let { request: { url } } = ctx
  // 首页
  if (url == '/') {
    ctx.type = "text/html"
    ctx.body = fs.readFileSync('./dist/index.html','utf-8') // 文件相对路径
  }
  url = '/dist' + url
  if (url.endsWith('.js')) {
    // js文件
    const p = path.resolve(__dirname,url.slice(1))
    ctx.type = 'application/javascript'
    const content = fs.readFileSync(p,'utf-8')
    ctx.body = rewriteImport(content)
  }
  if (url.endsWith('.css')) {
    // css文件
    const p = path.resolve(__dirname,url.slice(1))
    ctx.type = 'text/css'
    const content = fs.readFileSync(p,'utf-8')
    ctx.body = rewriteImport(content)
  }
  if (url.endsWith('.ico')) {
    const p = path.resolve(__dirname,url.slice(1))
    const content = fs.readFileSync(p,'utf-8')
    ctx.body = rewriteImport(content)
  }
  if (url.startsWith('/@modules/')) {
    // 这是一个node_module里的东西
    const prefix = path.resolve(__dirname,'node_modules',url.replace('/@modules/',''))
    const module = require(prefix + '/package.json').module
    const p = path.resolve(prefix,module)
    const ret = fs.readFileSync(p,'utf-8')
    ctx.type = 'application/javascript'
    ctx.body = rewriteImport(ret)
  }

})
function rewriteImport (content) {
  return content.replace(/from ['"]([^'"]+)['"]/g,function (s0,s1) {
    // . ../ /开头的，都是相对路径
    if (s1[0] !== '.' && s1[1] !== '/') {
      return `from '/@modules/${s1}'`
    } else {
      return s0
    }
  })
}

app.listen(8000,() => {
  console.log('node koa start at 8000')
})

3、控制台启动服务

node http.js

4、注意

这个时候访问图片依旧为no found ,需要配置nginx代理启动服务，可以正常显示图片资源。