vite.config.ts开启network

### 配置 Vite 项目的 Network 设置

在 `vite.config.ts` 文件中配置网络相关设置主要涉及几个方面，包括但不限于跨域请求处理、服务启动时的端口和host地址设定等。

对于跨域代理配置，在 `vite.config.ts` 中可以通过 server.proxy 属性来实现。这使得开发者可以在本地开发环境中轻松解决前后端分离带来的跨域问题[^1]。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000', // 后端接口的基础URL
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  }
})

当涉及到生产与开发环境的不同配置需求时，比如不同的API base URL 或者其他资源路径差异，则应该利用 `.env` 文件配合 import.meta.env 来区分不同模式下的变量值[^4]。

如果项目中有 CSS 单位转换的需求，如 px 转 vw ，也可以在此文件内完成相应插件的集成工作[^2]：

import pxtovw from 'postcss-px-to-viewport-8-plugin';
const loader_pxtovw = pxtovw({
  viewportWidth: 375,
  viewportUnit: 'vw',
});

export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
        loader_pxtovw,
      ],
    },
  },
});

为了确保应用能够正确地在网络环境下运行，还需要考虑一些额外的小配置项，例如自动重启机制以及格式化工具的选择等，这些都可以帮助提高开发效率并保持代码风格的一致性。