vue2 ssr项目开发环境添加vite支持记录

站长

2023年01月16日 16:49 · 阅读数 102

前言

为什么选择vite？犹如官网的介绍极速的服务启动（使用原生ESM 文件），无需打包!轻量快速的热重载（无论应用程序大小如何，都始终极快的模块热重载（HMR））。

为了解决我们现在我们项目存在的一些问题，比如项目大了启动慢，启动后占用我们电脑内存很大问题，以及不支持热更新问题，热更新很慢问题。

目前在我们项目做的还是只是在开发环境对vite的启动支持，打包还是使用了webpack，原因是我们只对开发效率的追求，主要还是迁移成本大。😄

迁移过程

由于我们项目是ssr服务端渲染的所以迁移以及启动的也以官网的ssr渲染为步骤进行, 其实也就是类似ssr吧，感觉跟ssr还是有区别的。

安装相关vite

yarn add vite -D | npm install vite -D

目录下新建相关vite.config文件迁入一些webpack项目所需要的配置以及安装一些相关vite插件

由于项目是vue2的得安装vite-plugin-vue2插件

import { type UserConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'


const config: UserConfig = {
    // 迁入一些webpack配置比如alias、extensions
    resolve: {
      extensions: ['.json', '.vue', '.ts', '.scss', '.css'],
      alias: {
          'src': path.join(__dirname, './src'),
      }
    },
    // 配置相关加载scss文件
    css: {
        preprocessorOptions: {
           scss: {
             additionalData: '@import "./src/assets/scss/main.scss";' // 添加公共样式
           },
         }
    },
    plugins:[
        createVuePlugin({
              target: 'esnext',
               jsx: true // 为了支持jsx
        })
    ]
}


export default config

这里主要是一些vite.config的配置通过ssr渲染的时候默认会加载此配置.

配置ssr相关script脚本文件

const BASE_ADDRESS = 127.0.0.1

const koa = require('koa');
const vite = require('vite')
const connect = require('koa-connect')


const { exec } = require('child_process')
const server = new koa()
vite.createServer({
 root: process.cwd(),
 server: {
   middlewareMode: 'ssr',
   hmr: {
     protocol: 'ws',
     host: BASE_ADDRESS 
   },
   watch: {
     usePolling: true,
     interval: 100,
     ignored: ['dist', 'public', 'node_modules', 'script', 'server', 'cli', 'config']
   },
 }
}).then(viteRs => {
 global.vite = viteRs

 server.use(connect(viteRs.middlewares)) //官方是用的express所以使用了koa-connect转一下， 使用 vite 的 Connect 实例作为中间件
 //TODO 路由的配置 

 server.listen(9002, ()=> {
   console.log(`${colors.bgGreen('[本地地址]:') } http://${BASE_ADDRESS}:9002`)
   process.platform === 'darwin' ? exec(`open  http://${BASE_ADDRESS}:9002`) : exec(`start  http://${BASE_ADDRESS}:9002`)
 })
})

上述配置其实跟官网的差不多吧，直接copy都ok的只是转了下koa的。跟多的的参考官网的配置 cn.vitejs.dev/guide/ssr.h…

配置相关模板渲染配置

因为我们项目是通过koa控制的路由所以渲染方式跟官网有点不一样的地方就是没有使用到了vite.ssrLoadModule('/src/entry-server.js')方法，我做的处理是将相关webpack配置的entry的路径的js文件直接通过读取html文件并且加入到html的scirpt中,具体方法可参考如下。
```
const templateRender () => {

   let template = fs.readFileSync(
     path.resolve(__dirname, 'index.html'),
     'utf-8'
   )
    global.vite.transformIndexHtml(context.req.url, template)

   const scripts = `<script type="module" src="${getEntryIsSelectedJs(context, script[0])}">
    </script><script>window.IS_VITE=true</script>`

   const html = template.replace(`<!-script-->`, scripts)

   reutrn html
 }
```
然后通过路由的ctx.body直接返回这个templateRender方法的返回值就ok。

到此配置文件基本迁移完成了，然后通过node运行上面的3步骤的script文件即可，运行后会发现各种报错，不要慌一个个进行解决。😂

迁移后运行项目问题解决

vue2中相关jsx问题报错如下，主要是使用vite-plugin-vue2原因吧，官方没有很好支持，需要比如在使用一些jsx语法的js文件改成jsx，在vue文件中使用了jsx语法的要在script文件中加相关lang="jsx"。

检查到相关使用到了jsx语法文件就包含了200多个，发现修改成本太大了，而且相关打包还是得用webpack进行不知道会不会出现问题，后来通过搜索此plugin的解决方法，找到了相关vite-plugin-vue2-jsx的插件,此插件跟vite-plugin-vue2的用法一摸一样支持增加不需要修改jsx支持文件的结构。所以用了此插件很好的解决此相关的问题，减少了大批量的文件修改。
相关引入element-ui的样式问题好像相关~是webpack中的支持的在vite中不支持，然后需要将此符号修改成直接路径的形式 /node_modules目录进行引入样式文件。

在后续的页面加载中又发现相关此相关用法在很多地方用到了，为了遵循相关尽量不修改原代码的结构，所以又网上搜各种解决方法，最后通过配置alias进行一个替换。
```
  {
    find: /^~(.*)$/, 正则匹配
    replacement: '$1'
  }
```
在项目中使用了require问题因为此方法是在webpack中用@originjs/vite-plugin-commonjs插件进行转化。水电费缴费看师姐对方就爱上咖啡机进富士康的

相关在.vue文件中引入动态图片问题，因为vite与webpack写法不一致所以通过环境判断写一个兼容性的代码（具体vite的引入方式可参考官网）
由于写一些标签src引入为空发生的问题比如video、 img
热更新问题

由于使用的是ssr在使用vite的createServer方法后的hmr要配置当前启动的地址。

总结

目前迁入还算是成功的，遇到的问题并不是很多。最后就是在首次启动的使用后打开很慢问题可以通过配置vite-plugin-optimize-persist与vite-plugin-package-config插件进行一个优化处理，以及具体查看参考此文章vite首次打开界面加载慢问题/解决。

最后就是迁入vite后是真的香，虽然说可能会首次启动的时候慢一些，当是加载各个页面都是还可以的对于开发效率也还行，修改页面更新也很快。不像webpack还得等编译，vite用的是websocket连接，当代码被修改时，服务端发送消息通知客户端去请求修改模块的代码，完成热更新。

转载自:https://juejin.cn/post/7186594283024023607