vue3.x從打包、部署到上線

anchovy發表於2022-04-29
Vue

一、前言

作者採用的專案架構：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實現的部署，所以可能和大家遇到的情況不一樣，當然原理都差不多，一通百通，希望此篇對大家有參考價值。

更多前端知識，請關注小程式，不定期有驚喜！

image.png

相關文章