vite构建vue前端工程、完成项目初始化配置

初始化项

1. 创建项目
2. 安装路由
3. 安装axios
4. 配置多环境
5. 配置路径别名

当前本机环境

创建项目

npm create vite

安装路由

npm install vue-router@4

安装axios

npm install axios

import axios from "axios";

const service = axios.create({
    // 根据环境决定请求路径url
    baseURL: import.meta.env.VITE_APP_BASE_URL,
    // 请求超时时间
    timeout: 5000
})


service.interceptors.request.use((config) => {
    // 前置通知

    return config;
}, (error => {
    return Promise.reject(error);
}))

service.interceptors.response.use((config) => {
    // 后置通知

    return config;
}, (error => {
    return Promise.reject(error);
}))


export default service;

配置多环境

• .env.development

# dev开发环境配置项
NODE_ENV = development

VITE_APP_BASE_URL = 'http://localhost:8081/app'

• .end.production

# prod开发环境配置项
NODE_ENV = production

VITE_APP_BASE_URL = 'http://localhost:8081/app'

• package.json

"scripts": {
  "dev": "vite --mode development",
  "prod": "vite --mode production",
}

配置路径别名

import path from 'path'

resolve: {
    alias: {
        "@": path.resolve(__dirname, "src"),
        "~": path.resolve(__dirname, "src/components"),
        "^": path.resolve(__dirname, "src/api")
    }
}