生成一个Vit+Vue项目

1. 建立项目文件
2. 文件目录下cmd => 运行 npm create vite@latest => 选择vue => 选择js or ts
3. 基础组件下载

npm install vue-router@4 --save

npm install element-plus --save

npm install vuex@next --save

npm install mitt --save   // 组件通信

npm install axios

npm install vite-plugin-html -D // 处理html模板插件

npm install -D sass  // CSS预处理器

4. App.vue

<script setup>
</script>

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style scoped>
</style>

5. src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',//首页
      name: 'home',
      component: () => import('../views/Home.vue'),  // 需要建立views/Home.vue页面
    },

  ]
})

export default router

6. src/store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    timeLineTime: '',
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

7. src/utils/mitt.js

import mitt from 'mitt'
 
const bus = mitt()
export default bus

8. src/utils/request.js

import axios from 'axios'

import router from '@/router/index.js'

// const baseURL = 'http://192.168.1.199:9000'
const baseURL = "http://192.168.1.8:8086"

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL,
  timeout: 100000
})

// 请求
instance.interceptors.request.use(
  (config) => {
    return config
  },
  (err) => Promise.reject(err)
)

// 响应
instance.interceptors.response.use(
  (res) => {
    console.log(res)
    // TODO 4. 摘取核心响应数据
    if (res.data.code === 0) {
      return res
    }
    // TODO 3. 处理业务失败
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    console.log(err)
    // TODO 5. 处理401错误
    if (err.code === 401) {
      router.push('/')
    }
    // 默认情况下
    ElMessage.error(err.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

9. main.js

// import './assets/main.css'  // 全局样式

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'

import router from './router'
import store from './store'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
  app.use(ElementPlus, {
    locale: zhCn
  })

  app.use(store).use(router).use(ElementPlus).mount('#app')

10. vite.config.js

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from "vite-plugin-html"

const getTarget = (mode, target) => {
  return loadEnv(mode, process.cwd())[target];
};

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      //加入配置
      createHtmlPlugin({
        inject: {
          data: {
            title: getTarget(mode, "VITE_APP_TITLE"),
          },
        },
      }),
    ],
    define: {    // 不加会报错： process is not defined
      'process.env': {}
    },
    server: {
      host: '0.0.0.0',
      port: 8991,
      // 是否开启 https
      https: false,

    },
  }
})

11. index.html

<title><%- title %></title>

12. .env.development

# 页面标题
VITE_APP_TITLE = 环境项目名称

# 开发环境配置
ENV = 'development'

# npm_config_port = 9028

VITE_APP_BASE_API = ''

13. .env.production

# 页面标题
VITE_APP_TITLE = 生产环境项目名称

# 生产环境配置
ENV = 'production'

# VITE_APP_BASE_API = ''

14. .env.staging

# 页面标题
VITE_APP_TITLE = 测试环境项目名称

NODE_ENV = production

# 测试环境配置
ENV = 'staging'

VITE_APP_BASE_API = '/stage-api'