vue3.x从打包、部署到上线

一、前言

作者采用的项目架构：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实现的部署，所以可能和大家遇到的情况不一样，当然原理都差不多，一通百通，希望此篇对大家有参考价值。

更多前端知识，请关注小程序，不定期有惊喜！