vite.config.js配置-解决跨域问题,以及@vitejs/plugin-vue等报错

2023-4-7    前端达人

  • 开发环境

    在配置的过程中踩了很多坑,还是太菜,有些东西弄不明白什么意思。

    运行项目时的报错可直接到最下面看vite.config.js文件的注释

    目前项目用到的模块并不多,package.json文件如下

    
                                
    1. {
    2. "name": "PsWebV3Abb",
    3. "version": "0.0.0",
    4. "scripts": {
    5. "dev": "vite",
    6. "build": "vite build"
    7. },
    8. "dependencies": {
    9. "@vitejs/plugin-vue": "^1.0.0",
    10. "axios": "^1.2.1",
    11. "element-plus": "^2.2.26",
    12. "vite": "^4.0.3",
    13. "vue": "^3.0.4",
    14. "vue-router": "^4.1.5"
    15. },
    16. "devDependencies": {
    17. "@vue/compiler-sfc": "^3.0.4"
    18. }
    19. }

    其实主要还是这些模块的版本兼容问题

    vite的版本最开始是1.0.0,后面很多地方搞不下去了才卸载了重装新的版本

    当然还是建议仔细阅读一下官方文档,其实很多重要的点都讲的很清楚,只不过是遇到问题的时候才会注意到。官方文档请移步这里

    下面简单的说一下这个文件,

    首先是文件的位置,放在其他位置是无效的:

            

    运行vite项目的时候,就会自动解析根目录下面的这个文件

    我这里的主要目的还是解决项目运行时的跨域问题

    下面是封装的一个简单的请求示例,其中service是一个封装好的axios实例,可以指定一下baseurl,以及请求和响应拦截。

    其他的API都可以像这样通过给getItem添加方法的方式实现

    
                                
    1. import service from '../utils/requests.js'
    2. const getItem = {}
    3. getItem.getppitem = function (params) {
    4. return service.get('api/AutoSimple/getdata', params)
    5. }
    6. export default getItem

    vite.config.js 具体的配置如下

    
                                
    1. import { defineConfig } from 'vite'
    2. import vue from '@vitejs/plugin-vue'
    3. // import eslintPlugin from 'vite-plugin-eslint'
    4. // https://vitejs.dev/config/
    5. // 这个配置文件可能出现的问题:
    6. // 首先是此文件放置的位置
    7. // 1.未安装 @vitejs/plugin-vue
    8. // 处理方法:npm i @vitejs/plugin-vue@1.0.0
    9. // 由于本项目vite版本1.0限制,只能用了plugin-vue的1.0.0版本,但在运行的时候又导致了问题2,
    10. // 于是直接卸载vite重新安装最新的3.0.4,这个版本直接install plugin-vue仍然不行,还是要用1.0.0版本
    11. // 2.显示不存在函数 defineConfig
    12. // 在此之后npm run dev,又报了一个错:Cannot find module 'node:path'
    13. // 在掘金上看到是和node版本有关,更新后就可以正常运行了
    14. export default defineConfig({
    15. plugins: [
    16. vue()
    17. // 检查代码格式
    18. // eslintPlugin({
    19. // include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    20. // })
    21. ],
    22. server: {
    23. // 默认打开的端口和本地
    24. // host: '0.0.0.0',
    25. port: 3000,
    26. https: false, // 不支持https
    27. proxy: {
    28. '/api': {
    29. target: 'http://10.200.20.80/BARCODESERVICE', // 实际请求地址
    30. changeOrigin: true, // 是否跨域
    31. rewrite: (path) => path.replace(/^\/api/, '') // 对什么类的服务器匹配
    32. },
    33. }
    34. }
    35. })

    生产环境

    在部署生产环境时,又遇到了两个问题:

    1.公共路径的问题

    客户环境是IIS服务器,为了节省端口,在部署的时候选择在同一个网站下添加多个应用程序的方式,这就使得在部署时,需要添加公共的基础路径,这一点在官方文档中有详细的说明。

     

    解决方案:

    在package.json中配置

    
                                
    1. "scripts": {
    2. "dev": "vite",
    3. "build": "vite build --base=/PsWebDand/ "
    4. }

    2.跨域无效的问题

    vite.config.js 中的server的proxy无效,此时跨域的问题需要通过在后端服务中配置来解决

    IIS服务器

    
                                
    1. <httpProtocol>
    2. <customHeaders>
    3. <add name="Access-Control-Allow-Headers " value="Content-Type,api_key,Authorization" />
    4. <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
    5. <add name="Access-Control-Allow-Origin" value="*" />
    6. </customHeaders>
    7. </httpProtocol>
    蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
    希望得到建议咨询、商务合作,也请与我们联系01063334945。 

    分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

    蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档