【vue3基础】Vite和Vue3项目的简单配置

对新建的项目进行简单的配置，插件的使用和启动的配置等，使开发变得更简单一点，如果有不对的，可以提意见，我只是简单的记录一下，方便自己以后使用，如果有变动，后期会更改。

1. vite.config.js配置

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

import { fileURLToPath, URL } from 'node:url'  // 配置路径的别名 @ -> src路径的别名

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0', // 生成外部可以访问的连接
    open: true, // 启动后自动打开浏览器
    port: 8080, // 端口号(如果写了就是指定的，如果没有写就是随机的)
    proxy: { // 设置代理
      '/api': { // 需要转换的字段
        target: 'https://api.example.com', // 代理的目标地址
        changeOrigin: true, // 是否跨域
        rewrite: (path) => path.replace(/^\/api/, '') // 重写路径
        // rewrite: (path) => path.replace(new RegExp('^' + '/api'),'') // 正则的方式
      }
    }
  },
  resolve: { // 配置路径的别名 @ -> src路径的别名
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

2. 自动导入插件的配置（unplugin-auto-import）

运行 npm i unplugin-auto-import 安装 unplugin-auto-import 插件

vite.config.js 中配置

import AutoImport from 'unplugin-auto-import/vite'  // 自动导入插件

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({ imports: ["vue", "vue-router"] })  // 配置不需要导入的内容
  ],
  ...
})

AutoImport 中配置的内容，在页面开发中可以省略里面的方法引用。也可以配置自己写的模块，但是要注意以后找方法的时候找不到是从哪里来的。