# 搭建一个vite项目 > https://vitejs.cn/guide/#scaffolding-your-first-vite-project > > 文章有点长，有写的不对的地方，请各位大佬指点，有问题一起讨论相互学习学习创建一个空模板 ```js //使用yarn yarn create vite cd 进入项目 yarn //安装依赖包 yarn run dev //运行项目 ``` 使用模板创建项目 ```js yarn create vite my-vue-app --template vue ``` ## 安装element-plus ```js //安装 yarn add element-plus //引入 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' //注册 const app = createApp(App) app.use(ElementPlus) ``` ## setup的使用这个东西刚看是有点懵逼 > setup有两种用法，一种是单文件组件 ``` ### 使用对象方式 > 不使用在script标签上写的方式化就使用对象方式 ```vue ``` ## component组件的使用 > 不需要使用 components了，文件名也就是是组件名，无需使用name属性 ```js ``` ## component简化组件的使用 > 无需手动import导入组件，在components写好组件，然后按需引入组件 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/369949ee3f124825a9e7e3b9b7de21a1~tplv-k3u1fbpfcp-zoom-1.image) **方法** > 基于element-plus官网组件里推荐的按需导入的方式 ```js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import path from "path" // console.log(resolve) // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), Components({ // 用于搜索组件的目录的相对路径。 dirs: ['src/components'], resolvers: [ElementPlusResolver()], // 生成 `components.d.ts` 全局声明， // 也接受自定义文件名 dts: 'src/components/components.d.ts' dts的路径：false , //非必填项 }) ], }) ``` ## 使用keep-alive 缓存 > vue3 ``` 已经取消keep-alive的api ```vue

``` ## 计算属性computed > 在script标签里获取返回的值，记住一点要使用 **.value** ，要解构也是在拿到value进行解构 ```js import { computed } from 'vue' const val = computed(() => store.state.user.token) //要拿到具体值 const app = computed(() => store.getters.app) console.log(app.value, app.value.sidebar.opened) ``` ## 侦听器watch ```js import { reactive, watch } from 'vue' const formData = reactive({ userName: '', password: '' }) watch(formData, (newVal,oldVal) => { console.log(newVal, newVal.password, oldVal, oldVal.password) }) ``` ## reactive 代替 data函数 > <script setup> 的规范是没有data函数这个概念 ```js import { reactive } from 'vue' //使用 const formData = reactive({ userName: '', password: '' }) ``` ## ref 基本变量 > <script setup> 的规范是没有data函数这个概念 ```js import { ref } from 'vue' //使用 const user = ref('start') ``` ## 生命钩子函数 ### 导入钩子函数 ``` 通过import {} from 'vue' 进行导入指定的钩子函数 ``` ### 使用钩子函数 ```vue //使用方式1 //使用方式2 ``` ### vue3钩子函数注意：函数变动 > 尤大神介绍是moun比Destroy更形象 > > beforeDestroy 换成了onBeforeUnmount > > destroyed 换成了 onUnmounted ```vue ``` ## defineExpose将子组件数据暴露 > 将子组件的属性暴露出去 child ```vue ``` Parent > 需要给子组件声明一个ref属性，然后再setup中声明变量，再钩子函数中读取 ```vue ``` ## reactive 响应式赋值给element > 因为不能想vue2那样使用 this了，现在用的const 和 let 又不能直接让接收 reactive函数返回变量改变指向；所以：方法很简单，修改变量的引用里的内容就可以，只要对象没有被冻结 ```js const roleInfo = reactive({data: { xxx: 'ooo' }}) //使用ref const roleInfo = ref({xxx: 'ooo'}) //更新时： roleInfo.data = { xxx: 'aaa' } //更新： roleInfo.value = { xxx: 'aaa' } ``` 实际应用 ```vue ``` ## 废弃的过滤器最新使用 > 官网已取消过滤器，转而用计算属性替换过滤器新写法:直接在官网就可以 https://v3.vuejs.org/guide/migration/filters.html#global-filters ```vue ``` ## 原型链绑定和组件使用 ```js main.js || main.ts //创建vue 实例 const app = createApp(App) // 获取原型 const prototype = app.config.globalProperties //绑定参数 porottype.name = '我是挂载的全局的属性' ``` ```js //组件内获取使用 //引入 import { getCurrentInstance } from "vue"; // 获取原型 const { proxy } = getCurrentInstance(); // 输出 console.log(proxy.name); ``` ## vue3监听路由变化 ```js watch( () => router.currentRoute.value.params, (params) => { console.log('watch监听路由变化', params) }, { immediate: true } ) ``` ## vue3.0中globalProperties的定义以及 globalProperties定义的字段在setup中用法 ```js import { getCurrentInstance } from 'vue' const { proxy } = getCurrentInstance() console.log('打印全局', proxy.$filters) ``` ------ # sass的使用 > ```js yarn add sass sass-loader --dev ``` ------ # element-plus采坑 ## slot-scope 语法废弃 ```vue ``` ## Element puls 设置中文的方法 > src/app.vue 引入包给 el-config-provider 配置就可以了 ```vue ``` ------ # Vue3采坑 ## 父子组件传值 ### 父组件 > child子组件，无需使用components了，文件名即组件名 > > @setTitle是子组件定义的emit事件名用来修改父组件值 > > :title="title" 传给子组件的值，跟v2是一样的 ```vue ``` ### 子组件 > defineEmits,defineProps无需导入，直接使用 > > defineProps 定义接受父组件值，参数为对象，对象里的key，value就是接受的值和类型，返回值是对象，你可以使用es6中解构 > > 向父组件传值有些不同：需要先注册抛出的事件名：defineEmits(['setTitle'])，再通过返回的方法去执行这个事件：emits('setTitle', '修改了父组件值') // 向父组件传递数据。 ```vue ``` 也可以defineEmits(['setTitle', 'setContent']) 注册多个事件，无需每次单独组成 ```vue const emits = defineEmits(['setTitle', 'setContent']) const toEmits = () => { emits('setTitle', '修改了父组件值') // 向父组件传递数据 } const setCon = () => { emits('setContent', '修改了父组件内容') // 向父组件传递数据 } ``` ### bug > 通过emits修改父组件值之前一定要先通过defineEmits注册定义抛出的事件名，否则会弹警告，警告和错误都要修改！！！！ ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f66b6bb198ad4b4c94ae8ecb52e7952e~tplv-k3u1fbpfcp-zoom-1.image) 注意 > 一定要现在注册再使用，别把注册的步骤省略了，我当时傻乎乎的直接将注册和使用合并了了，错误了 ``` const emits = defineEmits(['setTitle', 'setContent'])、 const toEmits = () => { emits('setTitle', '修改了父组件值') // 向父组件传递数据 } 当时省略成了,defineEmits就弹出不存在的错误了 defineEmits(['setTitle', 'setContent']); ``` #### defineEmits' is not defined > .eslintrc.js ``` module.exports = { env: { 'vue/setup-compiler-macros': true } } ``` ## element-plus 打包过大 > ome chunks are larger than 500 KiB after minification. Consider: 好家伙：刚创建的项目，引入个ui库，打包就超过500kb了，项目大了还得了 **解决** > 使用按需导入element-plus ```js //组件按需导入 npm install -D unplugin-vue-components unplugin-auto-import //安装vite-plugin-style-import 组件样式按需导入 yarn add vite-plugin-style-import -D ``` vite.config.js ```js //批量导入模块 import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import styleImport from 'vite-plugin-style-import'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), //按需导入组件 AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), //按需导入组件样式 styleImport({ libs: [{ libraryName: 'element-plus', esModule: true, resolveStyle: (name) => { return `element-plus/theme-chalk/${name}.css`; }, }] }) ], }) ``` ## 无法识别 @ scr目录 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cdfc266ae5944c0eab6cbf0584bb76af~tplv-k3u1fbpfcp-zoom-1.image) 解决：vite.config.js ```js import path from "path"; export default defineConfig({ resolve: { alias: { //配置src目录 "@": path.resolve(__dirname, "src"), //导入其他目录 "components": path.resolve(__dirname, "src/components") } }, plugins: [ vue() ] }); ``` 或者数组的形式 ```js import path from "path"; export default defineConfig({ resolve: { alias: [ { find: '@', replacement: path.resolve(__dirname, "src"), }, { find: 'components', replacement: path.resolve(__dirname, 'src/components') } ] }, plugins: [ vue() ] }); ``` ## element-plus表单无法输入 > el-form 的model 中的 ruleForm 跟 ref 属性的名字冲突了，ref属性换其他的名称，model的变量不变就可以了，例如 loginRefrule ```vue ``` 解决 > 只有 ref 属性的值跟 model 的变量不一样即可 ```html ``` ## vue3.0 子组件修改父组件传递过来的值 > vue 的子组件不是不能直接更改父组件的值，需要将props 的值给到子组件，后再修改， > > 否则：Unexpected mutation of "props" prop. > > vue3提供了一个解决：toRefs：https://v3.cn.vuejs.org/api/refs-api.html#torefs > > `toRefs` 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行解构/展开 > 没又必要使用compute 和 watch来监听改变使用 ```js const { foo, bar } = reactive({ foo: 1, bar: 2 }) // 核心解决, 使用reactive接收不会响应时更新，需要使用toRefs const props = defineProps({ drawerStatus: { type: Boolean } }) const {drawerStatus} = toRefs(props) ``` 使用toRefs进行解决 ```vue ``` ## vue3.0 子组件修改父组件传递过来的值优化vue3 Unexpected mutation of "childFormData" prop > 超级简单版，父组件只要传入el-form的对象，子组件接收父组件的props既可完成 ### 父组件 > 父组件将 form表单的 popFormData传递给子组件 ```vue

``` ### 子组件 > 子组件定义一个 viewsData 对象接收父组件传过来的值：formData: props.childFormData，然后el-select中使用即可； > > 示例中的@change="chooseBusinessHandle" 选择后为父组件添加值或者修改值并不会报错：（vue3 Unexpected mutation of "childFormData" prop vue3“childFormData”属性意外突变） > > 如果还想为子组件添加验证：为子组件添加 prop 属性和 rules 属性即可。 ```vue ``` ### 效果 > 父组件点击确认的时候子组件也会跟着验证（实现），不需要通过emit告诉父组件去验证了 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10d54834c4464f178153d5aaded66f56~tplv-k3u1fbpfcp-zoom-1.image) > 子组件值改变的时候子组件会修改父组件传递过来的值，提示代码也看到了值的变动 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bafbe421a6cd4ea6a22528152a17c44e~tplv-k3u1fbpfcp-zoom-1.image) ## 修改element-plus组件样式 > vue中使用 /deep/ 不生效 > 解决：使用::v-deep(.el-drawer) 替换深度选择器后生效【必须加括号】 ```css ::v-deep(.el-drawer) { background: #fff; } ``` 不加报错 [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep() instead. ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/346f84918de643bf8360dcf3fbf64978~tplv-k3u1fbpfcp-zoom-1.image) ## 自定义校验规则无效 ```js // 表单校验 const validatetaxNo = (rule, value, callback) => { var reg = /^[0-9A-Z]{15,18}$/g if (!value) { callback(new Error('税号不能为空')) } else if (!reg.test(value)) { callback(new Error('税号格式不正确!')) } else { callback() } } const rules = reactive({ taxNo: [ { required: true, trigger: 'blur', validator: validatetaxNo, }, ], }) ``` ## vue3 el-upload 失败了还会出现在文件列表 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a21ef2391f5a4963899d6fb8e85f5798~tplv-k3u1fbpfcp-zoom-1.image) ```js :on-change="触发" if (!viewsData.fileTypeList.includes(file.raw.type)) { ElMessage.error('请上传JPG或PNG格式的图片') return false } ``` 为什么不是使用 before-upload 钩子函数呢 > 但是在对上传的文件做大小限制或者格式限制时，发现before-upload方法并不生效，查阅资料后发现：因为 before-upload 是指在文件上传之前、文件已被选中，但还没上传的时候触发，而设置了 :auto-upload=“false” 后，文件上传事件不被再次调用，，所以 before-upload 不生效，所以，限制图片大小和格式的时候，需绑定在 :on-change 里面，这样限制就生效了问题来了，明明在 on-change return false 文件还是会显示在文件列表解决： ```js if (!viewsData.fileTypeList.includes(file.raw.type)) { ElMessage.error('请上传JPG或PNG格式的图片') fileList.pop() return false } ``` ## vue项目设置scrollTop不起作用 ```vue ``` ## vite 插件使用require的common 报错： require is not defined？ > vite踩上了有插件使用require的common规范的坑解决： > 因为：vite,基本不识别老插件的require规范了，要用vite的方式 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb9f24ee28564969b29284df2c847523~tplv-k3u1fbpfcp-zoom-1.image) ------ # Vite 共享配置 ## resolve.alias 配置系统路径别名 ```js resolve: { alias: { "@": path.resolve(__dirname, "src"), "~": path.resolve(__dirname, "src/components") } } ``` ## resolve.extensions 配置忽略的扩展名 > 字符串数组类型： ['.js', '.ts']等等，加上vue后缀名基础的上追加：['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] > > vite不建议引入时忽略.vue扩展名，后期新版本的vue-cli也将不支持忽略扩展名 > > 尤神在github对不支持的回答 https://github.com/vitejs/vite/issues/178 ```js resolve: { extensions: { ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] } } ``` ------ # Vite 配置开发服务配置 > vite.config.js ： https://vitejs.dev/config/ ## server.host ip地址 ```js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://cn.vitejs.dev/config/#server-host // server.host 设置为 0.0.0.0 或者 true 将监听所有地址 export default defineConfig({ plugins: [vue()], server: { host: true, } }) ``` ## server.port 开发端口 ```js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://cn.vitejs.dev/config/#server-host // server.host 设置为 0.0.0.0 或者 true 将监听所有地址 export default defineConfig({ plugins: [vue()], server: { host: true, port: 9527 } }) ``` ## server.proxy开发端口 ```js import path from "path" server: { proxy: { //配置代理 '/api': { target: 'http://47.106.135.141:8092', // 所要代理的目标地址 rewrite: path => path.replace(/^\/api/, ''), changeOrigin: true, } } } ``` # vite操作bug ## 打包问题使用vite打包的是出现 rendering chunks（30）一直卡住不动 [github解决方案](https://github.com/vitejs/vite/issues/5597) 将vite的版本恢复到 2.5.10就可以了 ------ # eslint ## 安装 ```js // vsCode 安装eslint扩展 // 全局安装 npm i -g eslint babel-eslint //项目安装eslint依赖项 yarn add eslint babel-eslint eslint-plugin-vue -D //安装npx npm install -g npx //在项目里同过npx 初始化eslint配置【按选项配置】 npx eslint --init ``` ## ESLint vs code 配置打开插件 =====》点击扩展设置 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b65c6aef08c1434e921d748d8b8ab9a3~tplv-k3u1fbpfcp-zoom-1.image) 添加配置 > 每次在保存的时候就可以根据 .eslintrc.js 文件里你配置的ESLint规则来处理不符合规则的代码； > > 例如：配置了禁止分号，代码写了分号，保存时自动将分号干掉。 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/806357ae4599460baf1ef6954a2e0072~tplv-k3u1fbpfcp-zoom-1.image) ## 代码 > eslintrc里有对应规则配置和解释 .eslintignore 文件 ```js /node_modules/ /public/ .vscode .idea ``` .eslintrc.js ```js module.exports = { "env": { "browser": true, "es2021": true, "node": true }, "extends": [ "eslint:recommended", "plugin:vue/essential" ], "parserOptions": { "ecmaVersion": 13, "sourceType": "module" }, "plugins": [ "vue" ], /** * 这个选项是配置eslint 的验证规则的对象,[进入链接随便点击一个就是这个路径的配置] * https://eslint.bootcss.com/docs/rules/ */ "rules": { "semi": [2, 'never'], "no-multiple-empty-lines": [ "error", { "max": 2, "maxEOF": 1 } ], "for-direction": "error", /** * eslint-plugin-vue 对vue的配置规则 */ // https://eslint.vuejs.org/rules/multi-word-component-names.html 'vue/multi-word-component-names': [ "error", { // ignores要忽略的组件名称。将组件名称设置为允许, 其他非驼峰命名则错误 ignores: [ 'index' ] } ], } } ``` ## 过程问题 module' is not defined ```js "env": { "node": true // 这个配置让文件支持 module.exports ，否则会 'module' is not defined. }, ``` ## 使用方式 > 其中配置文件中使用 extends": "eslint:recommended 来启用推荐的规则，再安装是初始化的配置项就启动了 ```js // "eslint:recommended" 初始化时就开启了 module.exports = { "extends": [ "eslint:recommended", ], } ``` 例如点击 for-direction ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42ab14f6bb284a94a30ba9a4b70b4c4a~tplv-k3u1fbpfcp-zoom-1.image) 其中注释就写好语法了 ``` "rules": { "for-direction": "error", } ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a631c499ed14defbbc45e654c7659ee~tplv-k3u1fbpfcp-zoom-1.image) ## BUG ### Cannot find module 'babel-eslint' 找不到模块 'babel-eslint' 解决： ``` npm i -g eslint babel-eslint ``` ------ # vue-router4x ## router的使用安装 ```js npm info vue-router versions 查看vue-router的版本然后下载最新的 //从这个版本信息中获取到版本号去安装 npm install vue-router@4.0.3 ``` scr目录 ``` - src |- router | |- index.js |- views |- Home.vue |- Contact.vue ``` index.js ```js import { createRouter, createWebHistory } from 'vue-router' // 开启历史模式 // vue2中使用 mode: history 实现 const routerHistory = createWebHistory(); const router = createRouter({ history: routerHistory, routes: [ { path: '/', redirect: '/home' } ] }) export default router ``` ## router钩子函数 ```vue ``` ## router 404 配置 > 核心代码：vue-router3x 的跳转不能用 * 去匹配会报错： Catch all routes ("*") must now be defined using a param with a custom regexp.【捕获所有路由（“*”）现在必须使用带有自定义正则表达式的参数来定义。】 > > 解决：在router中添加路由，path的地址：/:catchAll(.*) ```js import {createRouter, createWebHashHistory} from 'vue-router' const routes = [ { path: "/", component: () => import("@/layout/index.vue"), redirect: "/home", children: [ { path: "/roleManage", name: "roleManage", icon: "", meta: { title: '用户管理' }, component: () => import(/* webpackChunkName: "roleManage" */"@/views/role-manage/index.vue") } ] }, { path: '/error/404', name: '404', meta: { title: '找不到页面' }, component: () => import(/* webpackChunkName: "404" */ '../views/error/404.vue') }, // 核心代码：path: '/:catchAll(.*)', { path: '/:catchAll(.*)', ame: 'error404', redirect: '/error/404' } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router ``` ------ # vuex4x ## vuex安装引入安装 ``` yarn add vuex@next --save ``` scr目录下store目录 ``` - store |- modules |- user.js |- index.js ``` index.js ```js import { createStore } from 'vuex' //import.meta.globEager 导入modules下的所有js文件 const files = import.meta.globEager('./modules/*.js') const modules = {}; //提取modules文件下js导出的内容 for (const key in files) { if (Object.prototype.hasOwnProperty.call(files, key)) { modules[key.replace(/(\.\/|\.js)/g, '').replace('modules/', '')] = files[key].default } } //创建store const store = createStore({ modules }) export default store; ``` user.js，这倒是跟v2没多大区别 ``` const state = { token: '我是token', name: '' } const mutations = { } const actions = { } const getters = { } export default { namespace: true, state, mutations, actions, getters } ``` main.js，也跟v2没啥区别 ```js import store from './store' const app = createApp(App); app.use(store) ``` login.vue，使用store > 先从vuex导出 useStore ，在使用 useStore函数返回的值 ```vue ``` # vuex5 -> Pinia # vue3 钉钉扫码登录最新解决方案 > 主要是使用方法和踩坑吧，坑踩的挺大，有vue3一起踩坑的可以相互讨论哈 > > 注意看注释，很多注意点在注释和总结那里 ## 往index.html 添加引入 ```html ``` ## 其他代码 ``` // api。js 可忽略 // 扫码登录 export function scanCode (params) { return request({ url: '/auth', method: 'get', params }) } ``` ## login.vue 代码算个示例吧：核心实现代码 ```vue //往登录页面放一个div id为login_container

``` ## 钉钉端配置 redirect_uri的地址配置前端的vue启动的地址，红的的就是 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8aa97c67bf2e49d39042160e5c170a3b~tplv-k3u1fbpfcp-zoom-1.image) ## 问题总结 > redirect_uri地址必须跟更vue启动的地址一致，也就是说必须 localhost+端口：http://localhost:2021/、你本地的ip+端口：http://192.168.1.215:2021/； > redirect_uri 的地址必须通过encodeURIComponent进行处理哦 > 1、踩过使用后端穿透问题，有问题会出现302重定向的问题【就是登录后跳转redirect_uri，再去拿后端的接口不现实，因为redirect跳转是后端的地址前端控制不了】pass了； > 2、前端使用钉钉穿透后，把穿透的地址给到后端放到钉钉的回调url里，这样确实是扫码登录后可以打开vue的项目，但是！！！一旦你将vue的穿透地址放到钉钉回调url【：也就是redirect_uri的地址】后有个非常非常严重的问题：【就是自动刷问题，一分钟页面自动刷新：罪魁祸首是 vite 的热更新功能，为什么跟热更新有关呢：因为vite热更新：真的这么智能：改下代码就刷新页面？不是的，是有轮训机制，定时去检测代码，检测的同时发现打开的域名【也就是穿透的地址】跟vue启动的域名不一致，vite始终匹配不上：就会触发window.location.reload()重新刷新，一直不匹配就一直不刷新】； > > > > 2的解决方法就是：localhost+端口：http://localhost:2021/、你本地的ip+端口：http://192.168.1.215:2021/；localhost就没必要使用。配置ip就可以了这种情况占用问题，昨天还好好的今天就穿透不了的问题：解决方法是【其实已经不用穿透了，在钉钉开发者平台上配置回调redirect_uri地址就是前端vue项目启东的地址就可以，然后前端就没必要穿透了】 ``` //这种穿透的端口是vue项目启动后的端口 //将abcde的换掉就行：ding -config=ding.cfg -subdomain=start 9527 cd windows_64 ding -config=ding.cfg -subdomain=abcde 8080 ``` 问题效果： ``` ****这一行错误 Version 1.7/1.7 Forwarding 127.0.0.1:4044 Forwarding 127.0.0.1:4044 Web Interface 127.0.0.1:4040 # Conn 0 Avg Conn Time 0.00ms ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c932ae66ba4d44d2a2c6b43a9d9b6faf~tplv-k3u1fbpfcp-zoom-1.image) 还有就是后端接口的： http://zhangsan.vaiwan.com 这个接口地址是后端用花生壳穿透的，不要用ip ```js service.interceptors.request.use((config) => { if (store.getters.token){ config.headers['Authentication'] = getCookie('token') } else { console.log(config) if (config.url.includes('/auth')){ config.baseURL = 'http://zhangsan.vaiwan.com' } } console.log("拦截", config) return config }, (error) => { return Promise.reject(error) }) ``` ## 定位问题步骤总结 > 首先通过打包，确定开发环境是否有问题，还是只在运行项目的时候才有定时重载页面问题；定位到打包后不会刷新； > > 这个问题触及：vite 和更新源码了：vite 原理：HMR 和 Live Reload 更加vite 热更新原理，webSocket 来进行连接，重载主要在 handleHMRUpdate 负责代码的更新逻辑，当检测文件无法热更新的时候，只能全部加载也就是刷新了，但是这种的缺陷vite也没有做掐断机制以及报错。 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08f30bac14434d65b9b7c7c2ba089d7a~tplv-k3u1fbpfcp-zoom-1.image) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a811b58a0e5345ca861c5fda13555db6~tplv-k3u1fbpfcp-zoom-1.image) # webpack ## webpack-dev-server配置了changeOrigin依然无效的解决方案 > webpack-dev-server配置了changeOrigin依然无效的解决方案,出现这种情况时因为changeOrigin=true时,底层只会将request-header中的host字段修改,并不会修改Origin字段,同时会在request-header中添加x-forwarded相关字段传递代理前的信息,部分站点会获取x-forwarded信息做来源检测,使用以下配置绕过以上问题: ```js devServer: { disableHostCheck: true, proxy: { '/api': { target: 'http://www.marklion.cn/', changeOrigin: true, pathRewrite: { '^/api': '/' }, headers:{ //改写Origin,注意结尾不含 / Origin:"http://www.marklion.cn", //改写Referer Referer:"http://www.marklion.cn/", }, "onProxyReq": (request, req, res) => { //移除x-forwarded相关header request.removeHeader('x-forwarded-host'); request.removeHeader('x-forwarded-proto'); request.removeHeader('x-forwarded-port'); request.removeHeader('x-forwarded-for'); } } } } ``` # 移动端兼容问题 ## ios 数据不回显问题 ```html

``` ```css .iosStyle { /* 解决数据不回显问题 */ input:disabled, input[disabled] { -webkit-opacity: 1 !important; opacity: 1 !important; color: #666 !important; webkit-text-fill-color: #666 !important; } :deep(input:disabled) { -webkit-opacity: 1 !important; opacity: 1 !important; color: #666 !important; webkit-text-fill-color: #666 !important; } :deep(input[disabled]) { -webkit-opacity: 1 !important; opacity: 1 !important; color: #666 !important; webkit-text-fill-color: #666 !important; } } ``` ## el-select ios 上无法拉起键盘 el-select 再添加 filterable属性支持输入搜索时，在ios上无法拉起键盘 ### 解决 ``` ``` js代码 ```js import { reactive, ref, nextTick, onMounted } from 'vue' const selectRef = ref(null) const { proxy } = getCurrentInstance() //获取全局 setFocus: (value) => { nextTick(() => { if (!value) { setTimeout(() => { viewsOperate.delRead() }, 700) } }) }, delRead: () => { const { selectRef } = proxy.$refs console.log(selectRef[0]) if (selectRef[0]) { const input = selectRef[0].$el.querySelector('.el-input__inner') //这里需要打印出dom元素才算正常，如果拿不到使用原生的 document.getElementById if (input) { console.log(input) input.removeAttribute('readonly') } } }, ``` ## ios 文件上传失败，安卓可以上传 ### 错误在进行文件上传后台报错在使用axios进行文件上传时,后台报500 ：org.springframework.web.multipart.MultipartException: Current request is not a multipart request 经过排查不是后台程序的问题,在前端上传的时候对数据进行了处理 > 明明安卓可以上传，弹出的是后端的错误，这种情况，需要要抓包 ### 原因错误上传文件参数【参数都已经不是file了】 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b0aa9c0964914f87a0f368bed144bf2a~tplv-k3u1fbpfcp-zoom-1.image) 正常上传文件参数 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1bee22351559467382401f70c4e4755e~tplv-k3u1fbpfcp-zoom-1.image) ### 解决 ```js // 上传附件或者图片 export function uploadBatch(data = {}) { return request({ url: '/uploadBatch', method: 'post', data, transformRequest: [], //防止被篡改,是过滤参数用的，防止钉钉篡改参数 headers: { //header也要加上 'Content-Type': 'multipart/form-data', }, }) } ```

Bank Account Balance