共计 2310 个字符，预计需要花费 6 分钟才能阅读完成。
一、前言
作者采纳的我的项目架构：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 实现的部署，所以可能和大家遇到的状况不一样，当然原理都差不多，一通百通，心愿此篇对大家有参考价值。
更多前端常识，请关注小程序，不定期有惊喜！
