vue3.x from packaging, deployment to online

I. Introduction

The project architecture adopted by the author: vue3.x + typescript + element-plus + axios , it is very important to know this, because currently vue3.x and element-plus are still in the process of continuous update and iteration, and there may be more iterations in the future. Changes, resulting in specific solutions will also change.

Specific version:

 {
  "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"
  }
}

2. Packaging

If you pack it for the first time, it is still the conventional first npm run build to see if it goes well. If it goes well, of course, according to the author's experience, there will definitely be some problems.

Common problems encountered are as follows:

1. TS statement reference problem

/// <reference path="../node_modules/socket.io-client/dist/socket.io.js" />

To use the .js file in the TS environment, you need to add allowJs to the compilation configuration, otherwise an error will be reported. The specific modifications are as follows:

Open tsconfig.json add the following configuration:

 {
  "compilerOptions": {
    "allowJs": true
  }
}

2. vue3 Cannot find name 'ComponentSize' problem

This problem is mainly introduced by element-plus , and the specific solutions are as follows:

Open tsconfig.json add the following configuration:

 {
  "compilerOptions": {
    "skipLibCheck": true
  }
}

3. This rule cannot come before a "@charset" rule problem

This problem is mainly caused by scss compilation. Although it is only an alarm level problem, it is uncomfortable to look at, so it is simply dealt with. The solution is as follows:

Open vite.config.js add the following configuration:

 export default ({ mode }) => defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        charset: false,
        additionalData: `@use "@/assets/styles/element/index.scss" as *;`,
      },
    },
  }  
})

3. Deployment

This is a single-page application integrated into the express framework. Since it needs to be compatible with the previous route, special processing is required here. The relevant process configuration is as follows:

Step 1: Modify the configuration, add the public URL

Open vite.config.js add the following configuration:

 export default ({ mode }) => defineConfig({
  base: '/vm/'
})

After configuration, the access path changes from http://localhost/ to http://localhost/vm/ .

Step 2: Modify the route

In addition to the base configuration, the path path needs to be changed in the routing, as follows:

Open router/index.ts modified example is as follows:

 const routes: Array<RouteRecordRaw> = [
  {
    path: '/vm/login',
    name: 'Login',
    component: import('@/views/Login.vue')
  }
]

Step 3: Modify the Menu

After the routing is changed, the next step is to modify the menu link. The modification example is as follows:

 <el-menu-item index="/vm/manage/department`">部门管理</el-menu-item>

Step 4: Add the express route

After the modification of vue is completed, the web service project needs to be modified below, so it is necessary to add a wildcard routing configuration to the express project, and the modification is as follows:

 router.get("/vm/*", function (req, res, next) {
  res.render("index");
});

Step 5: Move Files

Put the resources (assets, images, etc.) in the package dist directory into the express project public/vm/ directory, and then put index.html in the views/ directory

Step 6: Start the express project

 > npm start

Visit: http://localhost/vm/login to open the login page

Finally, due to the complexity of the project, it is also necessary to configure the interface proxy in nginx. The relevant configuration is as follows:

 location /vapi/ {
  rewrite ^/vapi/(.*)$ /$1 break;
  proxy_pass http://126.114.65.21:8080;
}

In this way, any interface requested through /vapi will be proxied to http://126.114.65.21:8080 .

4. Summary

The related issues and modifications from packaging to deployment are listed one by one. There are a little more technical points and modifications involved, so it is necessary to have a basic grasp of the vue3+ts technology stack, and then this is a deployment based on express. Therefore, it may be different from what you have encountered. Of course, the principles are similar. Everything is perfect. I hope this article has reference value for everyone.

For more front-end knowledge, please pay attention to the applet, there will be surprises from time to time!