创建vue3项目

npm create vue@latest

编译打包生成报告

yarn add rollup-plugin-visualizer

vite.config.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import { visualizer } from 'rollup-plugin-visualizer'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    visualizer(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

修改项目访问的端口号

vite.config.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import { visualizer } from 'rollup-plugin-visualizer'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3007
  },
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    visualizer(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

添加代理解决跨域

vite.config.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import { visualizer } from 'rollup-plugin-visualizer'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3007,
    proxy: {
      '/api': {
        target: 'http://localhost:85',
        changeOrigin: true,
        rewrite: (path) => {
          console.log(path)
          return path.replace(/^\/api/, '/api')
        },
        // HTTP头部转发
        onProxyRes: (proxyRes, req, res) => {
          // 可以在这里修改响应头
        }
      }
    }
  },
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    visualizer(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

启动装饰器

"experimentalDecorators": true,

关闭变量未使用的警告

"noUnusedLocals": false, 

关闭参数未使用的警告

"noUnusedParameters": false,

tsconfig.app.json:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "experimentalDecorators": true,
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

 https://blog.csdn.net/xutongbao/article/details/139403290

声明scrept标签引入的第三方全局变量类型

declare const GC: any 

env.d.ts:

/// <reference types="vite/client" />

declare const GC: any

https://blog.csdn.net/xutongbao/article/details/140041209

路由重定向

router/index.ts:

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      component: () => import('../views/index/Home.vue'),
    },
  ],
})

export default router

 

人工智能学习网站

https://chat.xutongbao.top