Vite构建vue3项目的注意事项

自己在用vite构建Vue3项目时遇到的一些问题，这在里分享下：

• 安装cross-env yarn add cross-env -D // 一定要安装在开发环境
• 安装sass yarn add sass -D // 安装在开发环境
• vite读取配置文件是根据mode模式读取
  • yarn dev：若执行的development环境，则会自动读取.env.development配置文件
  • yarn build：若执行的production环境，则会自动读取.env.production配置文件
  • 若想读取其他配置文件，如.env.prelease 则需要执行yarn prelease: 'vite --mode prelease' 去改变mode的值
• .env[mode]配置文件：

  • 环境变量和模式 | Vite 官方中文文档 (vitejs.dev)

  • 必须以 VITE_ 开头，不然读取不到；例如：VITE_PATH

  • 读取：一般可通过 import.meta.env.VITE_PATH 获取

• vite的开发环境和生产环境中 base(打包公共路径)

  • 开发环境，base: './'

  • 生产环境，base: '/'

• vue.config.js配置

//import {loadEnv, defineConfig} from 'vite'
const path = require('path')
const base_name = process.env.NODE_ENV === 'development' ? './' : '/'
console.log(process.env.NODE_ENV, base_name, "base_name")
module.exports = {
  //hostname: '0.0.0.0', // 默认是 localhost
  port: '8000', // 默认是 3000 端口
  open: false, // 浏览器自动打开
  https: false, // 是否开启 https
  ssr: false, // 服务端渲染
  base: base_name, // 生产环境下的公共路径
  outDir: 'dist', // 打包构建输出路径，默认 dist ，如果路径存在，构建之前会被删除
  assetsDir: 'static', // 生成的静态资源目录路径
  proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
    '/api': {
      target: 'http://127.0.0.1:7001', // 后端服务实际地址
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

• axios发送请求带上cookie的问题

// 创建axios实例
const service = axios.create({
 baseURL: process.env.BASE_API, // node环境的不同，对应不同的baseURL
 timeout: 5000, // 请求的超时时间
 //设置默认请求头，使post请求发送的是formdata格式数据
 // axios的header默认的Content-Type好像是'application/json;charset=UTF-8'
 // headers: {  
   // "Content-Type": "application/x-www-form-urlencoded"
 // },
 withCredentials: true // 允许携带cookie
})