項目構建遇到的問題

構建指令

	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+端口配置文件中的更改只有這兩處，其他不要動