• vite官网：https://vitejs.cn/
• vue官网：https://v3.cn.vuejs.org/
• TS官网：https://www.tslang.cn/

使用vite快速搭建

• 安装vite

npm i -g vite

• 搭建vite项目

npm init vite client

• 安装依赖

npm install / npm i

• cd 到项目里 ，启动项目

vite / vite --host

• 启动成功后打开如下

vite.config.ts 配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  loadEnv(mode, process.cwd())
  return {
    base: './', //打包后的相对路径
    define: {
      'process.env': process.env //public环境
    },
    server: {
      host: true,
      port: 8080, //vite项目启动时自定义端口

      open: true,
      proxy: {
        // 正则表达式写法
        '^/api': {
          target: 'http://192.168.3.151:3000/api', // 后端服务实际地址
          changeOrigin: true, //开启代理
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
    plugins: [vue()],
    resolve: {
      //别名
      alias: {
        '@': resolve(__dirname, './src'),
        components: resolve(__dirname, './src/components'),
        api: resolve(__dirname, './src/api'),
        utils: resolve(__dirname, './src/utils'),
        store: resolve(__dirname, './src/store')
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          charset: false,
          additionalData: '@use "@/assets/style/global.scss" as *;'
        }
      }
    },
    build: {
      assetsDir: 'static', //打包后的公共文件夹名
      target: 'es2015',
      cssTarget: ['chrome52'],
      chunkSizeWarningLimit: 5000,
      terserOptions: {}
    }
  }
})