项目构建遇到的问题

构建指令

	npm run build，构建成功会生成一个dist文件夹 ps：每次改动项目内的代码都必须重新打包

关于JavaScript文件无法识别的问题

	原因：在 Vue项目中添加 TypeScript 支持后，可能会出现无法识别 JavaScript 文件的问题，导致项目构建失败解决：解决这个问题的方法是在 TypeScript 的配置文件 tsconfig.json 中添加 allowJs: true 选项，以允许 TypeScript编译器编译 JavaScript文件。文档： TypeScript的配置文件 tsconfig.json找到compilerOptions选项或者对象，加上新的选项语句：allowJs: true;

关于element-plus组件库中的模块显示找不到的问题

	原因：ts(TypeScript)不识别组件库中提供的模块解决：添加整体声明：文档：env.d.ts语句：declare module 'element-plus';

关于路由懒加载时组件路径报错问题

	原因：ts(TypeScript)不识别.vue为后缀的文件是一个vue组件解决：为此类文件添加整体声明文档：env.d.ts语句：declare module '*.vue' {import { DefineComponent } from "vue";const component: DefineComponent<{}, {}, any>;export default component;}原理：这段代码是一个 TypeScript 的声明文件，用于告诉编译器如何处理以 .vue 扩展名结尾的文件。它的作用是声明一个模块，该模块导出一个默认的组件对象，这个组件对象是一个 Vue 组件，具有空的 props、data 和 methods 选项。同时，这个组件对象没有 template 选项，因为 Vue 3 已经将 template 选项废弃，而是使用了 render 函数。另外，这个组件对象的类型是 DefineComponent<{}, {}, any>，其中 DefineComponent 是 Vue 3 内置的一个类型，用于定义组件的类型，第一个泛型参数是 props 的类型，第二个泛型参数是 data 和 computed 的类型，第三个泛型参数是 methods 的类型。{} 表示这些选项为空对象，any 表示 methods 的类型是任意类型。这样，在其他的 TypeScript 文件中引入这个模块时，就可以获得正确的类型推断和自动补全。

关于项目静态资源基准路径的设置

	原因：dist文档中的index.html文件引入文件时出现'/'开头的格式，代表文件路径是绝对路径，这种路径会导致项目上显示报错404情况解决：为打包的静态资源配置基准路径，将'/'改成'./'文档：vite.config.ts（在该文档导出的defineConfig配置对象中，与plugins，resolve，server等对象同级）语句：base:'./';

关于路由模式的问题

	原因：history模式下发布的项目页面一刷新就404解决：将路由模式改成hash模式文档：router文件夹中的index.ts文档，也就是路由管理对象实例化和配置的文档语句：（引入createWebHashHistory方法并将实例化配置对象中的createWebHistory方法改成createWebHashHistory即可）import { createRouter, createWebHashHistory} from 'vue-router';import routes from '@/router/routeConfig';const router = createRouter({history: createWebHashHistory(import.meta.env.BASE_URL),routes,})

关于nginx服务器的使用

	步骤一：下载nginx安装包，将相应的文件夹放在从磁盘开始路径中没有中文的目录下↓↓↓↓↓↓↓↓↓↓步骤二：将项目构建生成的dist文件夹放在nginx文件夹中，与nginx.exe同级别即可↓↓↓↓↓↓↓↓↓↓步骤三：配置nginx项目目录（更改配置文档需要将任务管理器中所有的nginx.exe进程全部关闭再重启）在conf文件夹中找到nginx.conf文件在该文件中找到server对象→location / 对象将该对象中的 root后面的文件夹名改成dist：root dist↓↓↓↓↓↓↓↓↓↓步骤四：配置反向代理（更改配置文档需要将任务管理器中所有的nginx.exe进程全部关闭再重启）原因：在vite.config.ts中配置的服务器请求代理只在开发模式下有用，生产模式下，这些代码不生效，所以需要重新配置请求代理，让nginx来转发文档：nginx.conf配置文件（在配置文件中添加如下语句）语句：location ~ /公共前缀 {proxy_pass http://+ip+端口}注意：配置文件中，语句前面加上#代表该条语句被注释，不生效添加语句中的~两边都有空格proxy_pass后面加上接口服务器的ip+端口配置文件中的更改只有这两处，其他不要动