在nginx上部署vue2/vue3项目(history模式)-CFANZ编程社区

1、vue项目路由history模式配置(vue2和vue3整个配置就这一步不一样)

vue2配置

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

vue3配置

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、打包并复制dist包到自己想放置的目录下

打包项目，生成dist文件，然后压缩

npm run build

复制到服务器目录下，解压

我这里将dist.zip包放置到/usr/web/myBlog/，
然后解压：

unzip dist.zip

3、配置nginx.config

一般nginx安装后，该文件在/usr/local/nginx/conf/下面。
在http{}内新增一下配置：

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模式，进行一个404的重定向)
        }
    }

4、启动nginx服务

cd到你nginx执行文件目录

cd /usr/local/nginx/sbin/

启动nginx服务

./nginx

补充一点重启ng的命令是

./nginx -s reload

如果你不想每次执行ng命令时都要跑到sbin目录下，那么可以执行一下命令配置全局变量，/usr/local/nginx/sbin/nginx为nginx执行文件，/usr/local/bin/为环境变量目录

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

然后就能够在所有地方使用以下命令

nginx

例如：

nginx -s reload

5、访问页面（所有配置成功^_）

服务器ip + 你所配置的端口