一、项目架构

vue的项目必须要进行打包，并部署在nginx服务器上的

二、vue的打包

1、修改vue.cofing.js文件

在该文件中添加publicPath属性，值为./

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({ transpileDependencies: true, publicPath:'./'
})

2、修改router/index.js文件

const router=new VueRouter({   routes,   mode:'hash',   base:'/studentMgr/'
})

3、打包

在终端上执行如下命令

npm run build

打包之后，会在项目的根目录下产生一个叫dist的文件夹，这个就是打包之后的文件

三、项目上线部署

1、更改dist的名称

这里我将dist的名称改为studentMgr

2、通过xftp等上传工具，将这个文件上传到/opt/下

3、修改nginx的配置文件

该配置文件在/etc/nginx/conf.d

使用编辑软件将default.conf文件打开