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

一、前言

作者采用的项目架构:vue3.x + typescript + element-plus + axios,知道这一点很重要,因为目前 vue3.xelement-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声明引用问题

///

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

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

vue3.x从打包、部署到上线_第1张图片

你可能感兴趣的:(前端,vue.js)