乐趣区

关于vue.js:vue3x从打包部署到上线

jiezi

一、前言

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

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

退出移动版