3.5在非Node服务中集成Vite

注意事项

• 引用路径的问题
• 在index.pug模板里面增加一个id=app 的div
• 在本地启动vite服务（3001），端口跟后端服务端口（4000）不一样
• 在index.pug 里面增加如下两行： script(src=”http://localhost:3001/@vite/client“ type=”module”)
• script(src=”http://localhost:3001/src/main.js“ type=”module”)
• 静态资源请求映射问题

正式环境：

实验步骤

1. 先启动一个nodejs express服务 端口4000，跑起来（假设这不是nodejs服务）
2. 启动一个vite本地开发环境，端口3001.
3. 把vite集成进入那个4000端口号的非集成开发环境里面。再模板index.pug里面添加如下内容

   div(id="app")
   script(src="http://localhost:3001/@vite/client" type="module")
   script(src="http://localhost:3001/src/main.js" type="module")

   :::info

• 上面@vite/client是个特殊标记，不能写成@vite/client.js
• type=”module”一定不要忘记加了，否则浏览器会报错
• 请注意这个是在服务端index.pug里面添加的 :::

1. 然后我们发现localhost:4000上的内容和localhost:3001上的内容还是有些差距，4000上静态资源，比如图片地址好像不大对，这个时候我们就知道应该在服务端设置静态资源映射了，