2023-4-7 前端達人
在配置的過程中踩了很多坑，還是太菜，有些東西弄不明白什么意思。
運行項目時的報錯可直接到最下面看vite.config.js文件的注釋
目前項目用到的模塊并不多，package.json文件如下
-
{
-
"name": "PsWebV3Abb",
-
"version": "0.0.0",
-
"scripts": {
-
"dev": "vite",
-
"build": "vite build"
-
},
-
"dependencies": {
-
"@vitejs/plugin-vue": "^1.0.0",
-
"axios": "^1.2.1",
-
"element-plus": "^2.2.26",
-
"vite": "^4.0.3",
-
"vue": "^3.0.4",
-
"vue-router": "^4.1.5"
-
},
-
"devDependencies": {
-
"@vue/compiler-sfc": "^3.0.4"
-
}
-
}
其實主要還是這些模塊的版本兼容問題
vite的版本最開始是1.0.0，后面很多地方搞不下去了才卸載了重裝新的版本
當然還是建議仔細閱讀一下官方文檔，其實很多重要的點都講的很清楚，只不過是遇到問題的時候才會注意到。官方文檔請移步這里
下面簡單的說一下這個文件，
首先是文件的位置，放在其他位置是無效的：
運行vite項目的時候，就會自動解析根目錄下面的這個文件
我這里的主要目的還是解決項目運行時的跨域問題
下面是封裝的一個簡單的請求示例，其中service是一個封裝好的axios實例，可以指定一下baseurl，以及請求和響應攔截。
其他的API都可以像這樣通過給getItem添加方法的方式實現
-
import service from '../utils/requests.js'
-
-
const getItem = {}
-
-
getItem.getppitem = function (params) {
-
return service.get('api/AutoSimple/getdata', params)
-
}
-
-
export default getItem
vite.config.js 具體的配置如下
-
import { defineConfig } from 'vite'
-
import vue from '@vitejs/plugin-vue'
-
// import eslintPlugin from 'vite-plugin-eslint'
-
// https://vitejs.dev/config/
-
-
// 這個配置文件可能出現的問題：
-
// 首先是此文件放置的位置
-
// 1.未安裝 @vitejs/plugin-vue
-
// 處理方法：npm i @vitejs/plugin-vue@1.0.0
-
// 由于本項目vite版本1.0限制，只能用了plugin-vue的1.0.0版本,但在運行的時候又導致了問題2，
-
// 于是直接卸載vite重新安裝最新的3.0.4,這個版本直接install plugin-vue仍然不行，還是要用1.0.0版本
-
// 2.顯示不存在函數 defineConfig
-
// 在此之后npm run dev,又報了一個錯：Cannot find module 'node:path'
-
// 在掘金上看到是和node版本有關，更新后就可以正常運行了
-
-
export default defineConfig({
-
plugins: [
-
vue()
-
// 檢查代碼格式
-
// eslintPlugin({
-
// include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
-
// })
-
],
-
server: {
-
// 默認打開的端口和本地
-
// host: '0.0.0.0',
-
port: 3000,
-
https: false, // 不支持https
-
proxy: {
-
'/api': {
-
target: 'http://10.200.20.80/BARCODESERVICE', // 實際請求地址
-
changeOrigin: true, // 是否跨域
-
rewrite: (path) => path.replace(/^\/api/, '') // 對什么類的服務器匹配
-
},
-
}
-
}
-
})
-
在部署生產環境時，又遇到了兩個問題：
客戶環境是IIS服務器，為了節省端口，在部署的時候選擇在同一個網站下添加多個應用程序的方式，這就使得在部署時，需要添加公共的基礎路徑，這一點在官方文檔中有詳細的說明。
解決方案：
在package.json中配置
-
"scripts": {
-
"dev": "vite",
-
"build": "vite build --base=/PsWebDand/ "
-
}
vite.config.js 中的server的proxy無效，此時跨域的問題需要通過在后端服務中配置來解決
IIS服務器
-
<httpProtocol>
-
<customHeaders>
-
<add name="Access-Control-Allow-Headers " value="Content-Type,api_key,Authorization" />
-
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
-
<add name="Access-Control-Allow-Origin" value="*" />
-
</customHeaders>
-
</httpProtocol>
藍藍設計的小編 http://www.syprn.cn