开发时遇到问题

问题一：

Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking 
event handler as 'passive' to make the page more responsive

yarn add default-passive-events
// 在main.js
import 'default-passive-events'

问题二：

Input elements should have autocomplete attributes (suggested: "current-password")

// 在input加入
autocomplete='off'

问题三：

// 在vue3中使用v-md-editor时，引入'@kangc/v-md-editor'  '@kangc/v-md-editor/lib/theme/vuepress.js'错误

// 在shims-vue.d.ts文件添加
declare module '@kangc/v-md-editor'
declare module '@kangc/v-md-editor/lib/theme/vuepress.js'

问题四：

// 使用eslint时可以用跳过下一行校验/* eslint-disable-next-line */

问题五：

# 原因分析： 因为http协议造成的跨域
# 前后端分离跨域问题-GET请求：
Access to XMLHttpRequest at 'http://**:5000/api/test/' from origin 'http:**//:8080' has 
been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js?b50d:184 GET http://**:5000/api/test/ net::ERR_FAILED

# 解决方案
第一种就是: 使用CORS
from flask_cors import CORS
CORS(app, supports_credentials=True)

第二种设置设置请求头
@app.after_request
def after_request(resp):
    resp = make_response(resp)
    resp.headers['Access-Control-Allow-Origin'] = '*'
    return resp

# 前后端分离跨域问题-POST请求：
Access to XMLHttpRequest at 'http://192.168.7.219:5000/' from origin 'http://192.168.7.219:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
xhr.js?b50d:184 POST http://192.168.7.219:5000/ net::ERR_FAILED

# 解决方案
# 前端统一设置代理
devServer: {
   open: true,
   hot: true,
   compress: true,
   disableHostCheck: true,
   port: 8080,
   proxy: {
     '/admin': {
       target: process.env.VUE_APP_BASEURL,
       changeOrigin: true,
       cookieDomainRewrite: 'localhost',
       secure: false,
       ws: true
     }
   }
 }
 # axios设置
import axios from 'axios'
import Qs from 'qs'
axios.create({
	withCredentials: true,
  	transformRequest: [function (data) { return Qs.stringify(data) }],
  	headers: {
    	// 默认是application/json形式的，需要设置成现在这样
    	'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  	}
})
# 第一种
# 后端
from flask_cors import CORS
CORS(app, supports_credentials=True)
# 第二种
def allow_cross_domain(fun):
   @wraps(fun)
   def wrapper_fun(*args, **kwargs):
       rst = make_response(fun(*args, **kwargs))
       rst.headers['Access-Control-Allow-Origin'] = request.environ.get('HTTP_ORIGIN', '*')  # 解决前端跨cookie问题
       rst.headers['Access-Control-Allow-Credentials'] = 'true'
       rst.headers['Access-Control-Allow-Methods'] = 'GET,POST,OPTIONS'
       allow_headers = "Referer,Accept,Origin,User-Agent,server,X-CSRFToken,token,X-Requested-With"
       rst.headers['Access-Control-Allow-Headers'] = allow_headers
       return rst
    return wrapper_fun

vite.config.ts import.meta.env.* 类型“ImportMeta”上不存在属性“env”,

修改vite.config.ts暴露, 添加loadEnv函数

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path, { resolve } from 'path'
export default ({ mode }) => {
  return defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    server: {
      host: '0.0.0.0', // 监听所有地址
      cors: false, //为开发服务器配置 CORS
      proxy: {
        //配置自定义代理规则
        '/api': {
          target: loadEnv(mode, process.cwd()).VITE_APP_BASE_API,
          changeOrigin: true, //是否跨域
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
    },
  })
}

项目中引用了iconfont的图标，因为某些原因导致mac和window的浏览器中图标大小或位置不一致

网上也有一些办法，尝试调整vertical-align属性就可以解决了