标签：node 实战 vue app 中间件 js vue3 vite
vue3 + node 实战（实现图片操作功能）总结
上效果
使用的技术栈
前端
vite: 一个刚出的构建工具，使用过后都说好，我是使用vite 来进行构建前端项目的。如何构建项目vue3: 这个也是刚出不久，许多生态也在慢慢的完善，关于vue2 升级到vue3的不同，可以查看element-plus：这是element团队推出支持vue3的ui组件库，我写文章这会儿还是测试版本，只是为了体验一下，顺便提点bug（感受一下不一样的bug）,哈哈vue-router: 支持vue3的路由scss： css 的预编译处理器axios向后台发送请求的库，既支持服务端，也支持客户端
后台
express：后台搭建服务的一个库，拥有良好的生态，例如：静态服务器，路由等log4js: 用于日志记录cors: 用于解决跨域的中间件
问题总结
element-plus form表单中 model 和 ref 的问题
描述： 在form 表单中，model 和 ref 使用相同的值，并且这个值是在
setup函数中对外导出会引起表单的值的改变，导致表单的值不正确，并且无法正确和表单赋值
解决办法：
model 和 ref 使用不一样的变量名称,详情 查看
vue3使用第三方插件需要使用对应vue版本问题
描述： 在vue 的项目中，需要使用第三方的包来实现某个功能, 使用在vue 的SFC中，会报一个警告：
[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js",本项目使用qrcode.vue这个包是可以直接支持vue3的，但是需要使用vue的别名
解决办法：
如果是vite搭建项目的话，在vite.config.js中直接指定vue的别名，如：'vue': 'vue/dist/vue.esm-bundler.js',详情，查看
vue3使用js插件问题(js插件)
描述： 这个js是指原生的js,不能是使用在vue2的插件，因为vue2插件里面的对应的vue实例不一样了。会报一个 插件打包方式的错误。
解决办法：
如果是vite搭建项目的话，在vite.config.js中加入以下配置：
optimizeDeps: {
include: ["qrcanvas"]
},
作用是：这样 vite 在执行 runOptimize 的时候中会使用 rollup 对 包含的 包重新编译，将编译成符合 esm 模块规范的新的包放入 node_modules 下的.vite_opt_cache中，然后配合 resolver 对 包含的包 的导入进行处理：使用编译后的包内容代替原来 qrcanvas 的包的内容，这样就解决了 vite 中不能使用 其他js包 的问题，这部分代码在 depOptimizer.ts 里。
vue3在导入依赖问题
本人使用的是 webstorm 编辑器，在导入模块的话，会自动导入，但是导入的模块会报错，原因是，vue3是基于现代的浏览器，导入的每一个模块都需要加入后缀名
解决办法：
每一个模块手动加入后缀名
node中间件的加载顺序
const express = require('express');
const path = require('path');
// 创建一个服务
const app = express();
const {defaultLogger} = require('./../config/logger')
// 使用vue页面导航中间件，必须要放在前面,这个是针对的路由模式是history
const history = require('connect-history-api-fallback');
app.use(history({
index: '/html/index.html',
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], // 不加这一行，后面有的请求会被拦截
rewrites: [ // 匹配到api开头的，继续向下传递
{
from: /^\/api/,
to: function (context) {
return context.parsedUrl.path;
}
}
]
}));
// 使用静态资源的中间件
app.use(express.static(path.resolve(__dirname, '../public'),{
index: ['html/index.html'],
redirect: true,
setHeaders: function (res, path, stat) {
res.set("Access-Control-Allow-Origin","*")
},
}));
// 使用cors 跨域中间件
const cors = require('cors');
app.options('*', cors()) // 预检请求
app.use(cors({
"origin": "*", // 维护运行的的源头
"methods": "GET,HEAD,PUT,PATCH,POST,DELETE", // 允许的请求方法名
"allowedHeaders": ['Authorization'], // 允许的请求头
"preflightContinue": true, // 解析完后，给下一个中间件
"optionsSuccessStatus": 200 // 响应的结果
}))
// 使用urlencode 中间件来获取post contentType= application/x-www-form-urlencoded
app.use(express.urlencoded({extended: true}))
// 使用json 中间件来获取post contentTpe =application/json
app.use(express.json())
// .... 业务逻辑的中间件
// 使用错误中间件
app.use(require('./../middleware/errorMiddleware'));
app.listen(9011, () => {
defaultLogger.info('服务启动了,正在监听9011端口，请请留意');
})
标签：node,实战,vue,app,中间件,js,vue3,vite 来源： https://blog.csdn.net/qq_41499782/article/details/112857758
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。