图文并茂学会Vite-中篇-通过服务访问静态资源以及重写请求路径

因为文章太长,所以就多搞两篇吧,大家从这个链接开始看,这个是上篇,等我写完就全部合并到上篇里

上篇地址:超高清截图手把手教你彻底学会Vite

接下来我们来实现,通过服务访问静态资源

  • 就直接用我们外层的那个文件 index.html,添加几句测试代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    测试代码哦~
    测试一下我们的静态资源读取情况~
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

  • 安装 koa-static
PS C:\jin_files\code\testDemo\vite-demo\my-vue-app> cd vite
PS C:\jin_files\code\testDemo\vite-demo\my-vue-app\vite> npm install koa-static

  • 新增vite\src\serverPluginServerStatic.js,编写静态插件调用的逻辑代码
const static = require('koa-static')

function staticPlugin({app,root}) {
  app.use(static(root)) // 这个root指的是根目录哦~~当我访问我的服务localhost:8088的时候,它会去找根目录下面的index.html
}
module.exports = staticPlugin
  • 在server.js里,编辑代码,搞一下插件,先来实现静态服务功能
const Koa = require('koa')
const staticPlugin = require('./serverPluginServerStatic')
function createServer() {
    let app = new Koa()
    // 实现静态服务功能,访问我们的服务器可以返回对应的文件koa-Static
    const context = { // 创建一个上下文,给不同插件共享功能
        app,
        root:process.cwd() // 这个目录就在vite-vue
    }
    const resolvePlugin = [staticPlugin]
    resolvePlugin.forEach(plugin => plugin(context))
    return app
}
createServer().listen(8088,()=>{
    console.log('xiaojin server is start at 8088')
    console.log('修改代码跑一把')
})


  • 关键代码标记给大家:

  • 然后,去浏览器里输入http://localhost:8088/,看一下效果吧~~

  • 很成功哇,我们的服务调用了静态资源,运行起来啦

配置一下,访问public目录试一把

  • 根路径下,创建测试文件public\test.txt
I am xiaojin ,I love code~

  • 进入vite\src\serverPluginServerStatic.js添加代码
const static = require('koa-static')
const path = require('path')
function staticPlugin({app,root}) {
  app.use(static(root)) // 这个root指的是根目录哦~~当我访问我的服务localhost:8088的时候,它会去找根目录下面的index.html
  app.use(static(path.resolve(root,'public')))
}
module.exports = staticPlugin

  • 访问http://localhost:8088/test.txt,试一把~
  • 成功啦~~

打开F12看一下

  • 啊哦~ 报错了
  • Uncaught TypeError: Failed to resolve module specifier “vue”. Relative references must start with either “/”, “./”, or “…/”.

怎么才能正常显示我们的资源不报错呢???就是说,如何让这句话 import { createApp } from ‘vue’ 正常执行?

冷静分析

  • es6模块会自动发送请求,查找相应文件
  • vite所做的事情就是: 根据你需要的文件,进行改写
  • 我们发请求,请求了main.js文件
  • 我们可以在后端将main.js里的内容进行改写操作,将所有不带./ …/ / 的全部加一个/@modules去寻找相应资源,不就不会报错了吗??

添加模块重写代码逻辑,重写我们的请求路径哇~~

  • 新建文件 vite\src\serverPluginModuleRewrite.js

function reWritePlugin({app,root}) {
app.use(async (ctx, next) =>{
    // todu:
    await next() // 先走静态服务,因为默认会先执行 静态服务中间件,将结果放到ctx.body
    // 需要将流转换为字符串,而且我们只需要处理其中JS的引用问题
    console.log('reWritePlugin:')
    if(ctx.body && ctx.response.is('js')){
        console.log(ctx.body)
        console.log('ctx.body已打印完毕')
    }

})
}
module.exports = reWritePlugin
  • 添加插件引用代码到vite\src\server.js
const reWritePlugin = require('./serverPluginModuleRewrite')
function createServer() {
    ...
    const resolvePlugin = [
        reWritePlugin, // 重写请求路径插件 ,为什么这么写这个顺序呢,原因解释放到插件里吧~~
        staticPlugin, // 静态服务插件
    ]
    ...
}

  • 访问http://localhost:8088/,然后查看你的命令行

好了,我要睡觉了,明天继续写

在这里插入图片描述

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值