vue3+ts项目中router+pinia+scss+unocss+跨域配置

以下是一个简化的Vue 3 + TypeScript项目的配置示例，包括router、pinia、SCSS和跨域配置：

1. vite.config.ts 配置示例：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`,
      },
    },
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

2. router/index.ts 配置示例：

import { createRouter, createWebHistory } from 'vue-router'
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  // 更多路由配置...
]
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})
 
export default router

3. store.ts 配置示例：

import { defineStore } from 'pinia'
 
export const useMainStore = defineStore({
  id: 'main',
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
  },
})

4. variables.scss 文件示例：

$primary-color: #3498db;
$secondary-color: #e74c3c;
 
// 更多变量定义...

5. main.ts 文件示例：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store } from './store'
 
const app = createApp(App)
 
app.use(store)
app.use(router)
 
app.mount('#app')

以上代码提供了Vue 3 + TypeScript项目中的基本配置，包括使用Vite作为构建工具，集成Vue Router、Pinia状态管理库，并支持SCSS预处理器。同时，它展示了如何配置Vite代理以处理跨域请求。这些配置和示例代码为开发者提供了一个清晰的起点，以便他们可以快速开始自己的Vue 3 + TypeScript项目。