vscode搭建vue开发环境

PS：需要先在本地安装nodejs及vscode，步骤省略

1、安装vite

npm install vite

2、创建vue项目

npm init vite@latest
#输入项目名称
✔ Project name:  simple-web-app
#选择框架
✔ Select a framework: › vue
#选择开发语言
✔ Select a variant: › vue-ts

Scaffolding project in /Users/sandycheng/vscode-project/vue-learning/simple-web-app...

Done. Now run:
#进入工作目录，初始化项目
  cd simple-web-app
  npm install
  npm run dev

3、安装vite mock插件

npm install mockjs vite-plugin-mock -D 

4、安装常用依赖

npm install vue-router@4 --save 
npm install axios --save 
npm install element-plus --save

5、配置mock、相对路径、反向代理，打开vite.config.ts

import { viteMockServe } from "vite-plugin-mock";
import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue';

import { resolve } from 'path'     
 //1、配置相对路径
const pathResolve = (dir: string): any => {  
  return resolve(__dirname, ".", dir)          
}

const alias: Record<string, string> = {
  '@': pathResolve("src")
}
//2、配置反向代理
export default defineConfig({
    server: {
        host: '0.0.0.0',
        proxy: { // 本地开发环境通过代理实现跨域
          // 正则表达式写法
          '/api': {
            target: 'http://${ip}:${port}', // 后端服务实际地址
            changeOrigin: true, //开启代理
            //rewrite: (path) => path.replace(/^\/api/, '')
          },
          '/getStream': {
            target: 'http://${ip}:${port}'', // 后端服务实际地址
            changeOrigin: true, //开启代理
          }
        }
    },
    plugins: [
        vue(),
        viteMockServe({
            #3、配置mock数据路径
            mockPath: "./src/mock",
            supportTs: false
        })
    ],
    resolve: {  
    //配置相对路径
      alias   
    }
});

mock数据需要在上文配置的“mockPath”下建立mock数据文件，格式：

export default [
    {
      url: "/api/v1/",
      method: "GET",
      response: () => {
        return {}  
      }
  },  
  {
      url: "/api/v2/",
      method: "POST",
      response: () => {
        return {}  
      }
  }
]