Deploy vue2/vue3 projects on nginx (history mode)

1. Vue project routing history mode configuration (the whole configuration of vue2 and vue3 is different in this step)

vue2 configuration

const router = new Router({
  mode: 'history', // 访问路径不带井号  需要使用 history模式
  base: '/bank/page',  // 基础路径
  routes: [
    {
      path: '/count',
      name: 'count',
      component: resolve => require(['@/views/count'], resolve) // 使用懒加载
    }
  ]
});

vue3 configuration

import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
// 在 Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
  // 指定路由的模式,此处使用的是history模式
  history: createWebHistory(),
  // 路由地址
  routes: [{
    path: '/todo-list',
    // 必须添加.vue后缀
    component: () => import('../views/todo-list.vue')
  }]
})

2. Package and copy the dist package to the directory you want to place

Package the project, generate a dist file, and compress it

npm run build

Copy to the server directory, unzip

I put the dist.zip package here /usr/web/myBlog/,
and then unzip it:

unzip dist.zip

3. Configure nginx.config

Generally, after nginx is installed, the file is /usr/local/nginx/conf/below. Add a new configuration
insidehttp{}

server {
        listen 8080;     #1.你想让你的这个项目跑在哪个端口
        server_name 120.48.9.40;     #2.当前服务器ip
        location / {
           root   /usr/web/myBlog/dist/;     #3.dist文件的位置(根据自己dist包放置的位置决定) 
           try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写，history和bash通用，这里配置主要是兼容history模式，进行一个404的重定向)
        }
    }

4. Start the nginx service

cd to your nginx executable directory

cd /usr/local/nginx/sbin/

Start the nginx service

./nginx

Add that the command to restart ng is

./nginx -s reload

If you don’t want to go to the directory every time you execute the ng command sbin, you can execute the command to configure the global variable, /usr/local/nginx/sbin/nginxexecute the file for nginx, and /usr/local/bin/set the environment variable directory

ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/

Then you will be able to use the following command everywhere

nginx

For example:

nginx -s reload

5. Visit the page (all configurations are successful^_)

Server ip + port you configured

6. Firewall open ports

If the page cannot be accessed at this time, it may be because the server has set up a firewall.

systemctl status firewalld Check whether the firewall
is turned on. If Active: active (running) is highlighted, it means that it is in the starting state.
Active: inactive (dead) gray means stop, and you can read the words.
Configure the startup state.

firewall-cmd --zone=public --query-port=8092/tcp Check whether the port is open
firewall-cmd --zone=public --add-port=8090/tcp --permanent Add an open port (port is determined by yourself)
firewall-cmd --reload Reload
Re-run the page access test.