当前位置：首页 > news >正文

创建vue3项目

news 来源：原创 2024/9/17 3:56:56

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