一、项目架构
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文件打开
location /studentMgr {
alias /opt/studentMgr;
index index.html;
}4、重启nginx服务器
-
通过xshell等命令行工具进入到linux
-
查看nginx进程状态
[root@iZ2ze9412d3dcresdj7soqZ ~]# ps aux|grep nginx
root 5379 0.0 0.0 46476 1036 ? Ss 15:38 0:00 nginx: master process /usr/sbin/nginx
nginx 5380 0.0 0.1 46928 2148 ? S 15:38 0:00 nginx: worker process
root 9627 0.0 0.0 112704 972 pts/2 S+ 16:20 0:00 grep --color=auto nginx-
杀死nginx进程
[root@iZ2ze9412d3dcresdj7soqZ ~]# killall -9 nginx-
启动nginx文章来源：https://www.toymoban.com/news/detail-607873.html
[root@iZ2ze9412d3dcresdj7soqZ ~]# /usr/sbin/nginx5、history模式下404的解决办法
-
在etc/nginx/default.d文件中将配置项上添加tryfiles属性，具体配置如下文章来源地址https://www.toymoban.com/news/detail-607873.html
location /studentMgr {
alias /opt/studentMgr;
index index.html;
try_files $uri $uri/ /studentMgr/index.html;
}到了这里，关于学生管理系统-07打包与上线的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
