1.前言笔者采用的项目架构：vue3.x+typescript+element-plus+axios，知道这一点很重要，因为目前vue3.x和element-plus还在开发中，在不断的更新迭代中，后期可能会有变化，会导致具体方案的变化。具体版本：{"dependencies":{"axios":"^0.26.1","element-plus":"^2.1.4","moment":"^2.29.1","qs":"^6.10.3","socket.io-client":"^2.3.0","vue":"^3.2.25","vue-router":"^4.0.14","vuex":"^4.0.2"},"devDependencies":{"@types/node":"^17.0.22","@types/qs":"^6.9.7","@vitejs/plugin-vue":"^2.2.0","eslint":"^8.11.0","sass":"^1.49.10","typescript":"^4.5.4","unplugin-auto-import":"^0.6.6","unplugin-vue-components":"^0.18.3","vite":"^2.8.0","vue-tsc":"^0.29.8"}}第二，如果你打包第一次，还是正常的，先运行npmrunbuild看看是否顺利，顺利的话最好，当然根据笔者的经验，肯定会出现一些问题，这里需要一一解决，一般会遇到的问题如下：1.TS语句引用问题///TS环境使用.js文件，需要在编译配置中加入allowJs，否则会出现会报错，具体修改如下：打开tsconfig。json添加如下配置：{"compilerOptions":{"allowJs":true}}2、vue3Cannotfindname'ComponentSize'问题这个问题主要是element-plus引入的，具体解决方法如下：打开tsconfig.json添加配置如下：{"compilerOptions":{"skipLibCheck":true}}3.该规则不能出现在"@charset"规则之前这个问题主要是scss编译导致的。虽然只是warning级别的问题，但是看着也不舒服，所以也就直接处理了。解决方法如下：打开vite.config.js，添加如下配置：exportdefault({mode})=>defineConfig({css:{preprocessorOptions:{scss:{charset:false,additionalData:`@use"@/assets/styles/element/index.scss"as*;`,},},}})3.Deployment这个是集成到express框架的单页应用，由于需要兼容之前的路由需要特殊处理到这里，相关流程配置如下：第一步：修改配置，添加publicURL，打开vite.config.js，添加如下配置：exportdefault({mode})=>defineConfig({base:'/vm/'})配置完成后，访问路径由http://localhost/变为http://localhost/vm/第二步：修改路由除了base配置外，还需要更改路线中的路径。操作如下：打开router/index.ts，修改示例如下：constroutes:Array=[{path:'/vm/login',name:'Login',component:import('@/views/Login.vue')}]第三步：修改菜单路由修改完之后，接下来就是修改菜单链接了。修改示例如下：部门管理第四步：添加快速路由vue修改完成后，接下来要修改web服务项目，所以也需要在express项目中添加通配符路由配置，如下：router.get("/vm/*",function(req,res,next){res.render（“指数”）;}）;第五步：移动文件将打包后的dist目录下的资源（assets、images等）放到express项目public/vm/目录下，然后将index.html放到views/目录下。第六步：启动express项目>npmstart访问：http://localhost/vm/login打开登录页面。最后，由于项目复杂，需要在nginx中配置接口代理，相关配置如下：location/vapi/{rewrite^/vapi/(.*)$/$1break;proxy_passhttp://126.114.65.21:8080;}这样，所有通过/vapi请求的接口都会被代理到http://126.114.65.21:8080。4.总结从打包到部署的相关问题和修改，一一列举。涉及的技术点和修改有点多，所以需要对vue3+ts的技术栈有基本的掌握，然后这个是基于express实现的部署，所以可能和你遇到的情况不一样，当然原理都是差不多的，大家可以看懂。希望这篇文章对大家有参考价值。更多前端知识，请关注小程序，不定时有惊喜哦！
