配置less，内网访问，热更新

前言

在用 vite 的官方命令 yarn create vite 构建项目后，还有很多地方需要配置从而便于开发，这里介绍一些常见的配置

使用 less

首先添加模块

yarn add less
yarn add less-loader

然后在 vite.config.ts 下添加

export default defineConfig({
  ...
  css: {
      // css预处理器
      preprocessorOptions: {
        less: {
          charset: false,
          additionalData: '@import "./src/global.less";',
        },
      },
  },
  ...
})

以上就可以在项目中使用 less 了

配置内网访问

在开发的时候常有内网访问的时候，默认手脚架没有开启，只能通过 127.0.0.1:3000 进行访问，要开启内网访问也要配置一下

然后在 vite.config.ts 下添加

export default defineConfig({
    ...
    server: {
       host: '0.0.0.0'
    },
    ...
})

配置完后就能在 192.198.xxx.xxx:3000 的内网进行访问了

热更新

热更新开启与否配置

export default defineConfig({
    ...
    server: {
      hmr:false,
    },
    ...
})