一、前言
作者采纳的我的项目架构：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" }}二、打包
首次打包的话，还是惯例的先npm run build一下，看看是否顺利，如果顺利最好，当然依据作者的教训，必定会出些问题，这里就须要一一对应的解决了，
个别会遇到的问题如下：
1、TS申明援用问题
/// <reference path="../node_modules/socket.io-client/dist/socket.io.js" />
TS环境下应用.js文件，须要在编译配置里增加allowJs才行，不然会报错，具体批改如下：
关上 tsconfig.json 增加如下配置：
{ "compilerOptions": { "allowJs": true }}2、vue3 Cannot find name 'ComponentSize'问题
呈现这个问题次要是由element-plus引入的，具体解决形式如下：
关上 tsconfig.json 增加如下配置：
{ "compilerOptions": { "skipLibCheck": true }}3、This rule cannot come before a "@charset" rule问题
呈现这个问题次要是因为scss编译导致的，尽管只是个告警级别的问题，但看着也不难受，索性就给解决掉，解决形式如下：
关上 vite.config.js 增加如下配置：
export default ({ mode }) => defineConfig({ css: { preprocessorOptions: { scss: { charset: false, additionalData: `@use "@/assets/styles/element/index.scss" as *;`, }, }, } })三、部署
这是一个集成到 express 框架上的单页利用，因为须要兼容以前的路由，所以这里须要特地解决，相干流程配置如下：
第1步：批改配置，增加公共URL
关上 vite.config.js 增加如下配置：
export default ({ mode }) => defineConfig({ base: '/vm/'})配置后拜访门路就由 http://localhost/ 变成了 http://localhost/vm/。
第2步：批改路由
除了base配置还须要在路由中扭转path门路，操作如下：
关上 router/index.ts 批改示例如下：
const routes: Array<RouteRecordRaw> = [ { path: '/vm/login', name: 'Login', component: import('@/views/Login.vue') }]第3步：批改菜单
路由改完了，接下来就须要批改菜单链接了，批改示例如下：
<el-menu-item index="/vm/manage/department`">部门治理</el-menu-item>第4步：增加express路由
vue的批改完了，上面就要批改web服务项目了，所以还须要到 express 我的项目增加通配路由配置，批改如下：
router.get("/vm/*", function (req, res, next) { res.render("index");});第5步：挪动文件
把打包dist目录下的资源（assets、images等）放到 express 我的项目 public/vm/ 目录下，而后把 index.html 放到 views/ 目录下
第6步：启动express我的项目
> npm start拜访：http://localhost/vm/login 就能够关上登录页了
最初因为我的项目的复杂度，还须要在nginx中配置接口代理，相干配置如下：
location /vapi/ { rewrite ^/vapi/(.*)$ /$1 break; proxy_pass http://126.114.65.21:8080;}这样但凡通过 /vapi 申请的接口都会代理到 http://126.114.65.21:8080 上。
四、总结
通篇从打包到部署的相干问题和批改都一一列举，波及到的技术点和批改略微有点多，所以须要对vue3+ts技术栈有一个根本的把握，而后这个是基于express实现的部署，所以可能和大家遇到的状况不一样，当然原理都差不多，一通百通，心愿此篇对大家有参考价值。
更多前端常识，请关注小程序，不定期有惊喜！