webstorm上开发的vue3+vite5+typeScript打包时报错

Question

在webstorn2020上开发的vue3+vite5+typeScript项目时：
1、router路由出现红色波浪线，但是能正常与后台通信运行，
感觉像是tsconfig.son不对，但不知道哪里不对

2、项目打包时报
Object literal may only specify known properties, and 'assetsPublicPath' does not exist in type 'BuildOptions'.
46 assetsPublicPath: './',项目打包时报错如下

router 路由配置如下
import { createRouter, createWebHistory } from 'vue-router'
import login from '../components/login.vue';
const router = createRouter({
  history: createWebHistory('./'),
  routes: [
    {
      path: '/',
      redirect:'login'
    },
    {
      path:'/login',
      name:'login',
      component: login,
    },
    {
      path: '/main',
      name: 'main',
      component: () => import('../components/main.vue')
    },
    {
      path: '/state',
      name: 'state',
      component: () => import('../components/state.vue')
    }
  ]
})
router.beforeEach((to,from,next)=>{
  next();
})
export default router


vite.config.ts配置如下
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
  ],
  base: './',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // server:{
  //   headers: {
  //     'Cross-Origin-Opener-Policy': 'same-origin',
  //     'Cross-Origin-Embedder-Policy': 'require-corp'
  //   },
  //   host:'0.0.0.0',
  //   port:8080,
  //   proxy:{
  //     '/api': {
  //       target: 'http://192.168.0.35',
  //       ws:true,
  //       changeOrigin: true,
  //       rewrite: path => path.replace(/^\/api/, '')
  //     }
  //   }
  // },
  build:{
    //指定输出路径
    outDir: "dist",
    //生成静态资源的存放路径
    assetsDir: "assets",
    //启用/禁用 CSS 代码拆分
    cssCodeSplit: true,
    //构建后是否生成 source map 文件
    sourcemap: false,
    //自定义底层的 Rollup 打包配置
    rollupOptions: {

    },
    //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
    emptyOutDir: true,
    assetsPublicPath: './',
  }
})
tsconfig.app.json 配置如下
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
  }
}
tsconfig.node.json配置如下
{
  "extends": "@tsconfig/node20/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",

    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"],
  }
}
main.ts配置如下：
import './assets/main.css'
import http from './assets/http'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)
app.config.globalProperties.$http = http;
app.mount('#app')

Answer 1

AIGC生成：

---

Vue3 + Vite5 + TypeScript 打包报错解决方案

你遇到的问题可能是 TypeScript 配置文件 tsconfig.json 中的错误。红色波浪线可能是 TypeScript 不能正确地识别 Vue Router 的类型。

可以尝试以下解决方案：

1. 在 tsconfig.json 文件中添加以下配置：

{
  "compilerOptions": {
    // ...其他配置...
    "typeRoots": ["node_modules/@types"],
    "types": ["vue", "vue-router"]
  }
}

这将告诉 TypeScript 使用 @types/vue 和 @types/vue-router 类型库。

1. 如果上述配置不生效，可以尝试使用 vue-tsc 插件，它可以帮助 TypeScript 正确地识别 Vue Router 的类型。

{
  "compilerOptions": {
    // ...其他配置...
    "plugins": {
      "vue-tsc": {}
    }
  }
}

1. 如果你使用的是 Vite5，可以尝试使用 vite.config.js 文件中的 typescript 配置，例如：

import { defineConfig } from 'vite';
import { VuePlugin } from '@vitejs/plugin-vue';
import { TsConfig } from 'vite-plugin-ts';

export default defineConfig({
  plugins: [
    VuePlugin(),
    TsConfig({
      tsConfig: 'tsconfig.json',
    }),
  ],
});

这将使用 tsconfig.json 文件中的配置来编译 TypeScript 代码。

如果你已经尝试了上述解决方案，但问题仍然存在，可以提供更多的错误信息或项目配置，以便更好地帮助你解决问题。

---