学生管理系统-07打包与上线

一、项目架构

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

[root@iZ2ze9412d3dcresdj7soqZ ~]# /usr/sbin/nginx

5、history模式下404的解决办法

• 在etc/nginx/default.d文件中将配置项上添加tryfiles属性，具体配置如下

location /studentMgr {
        alias /opt/studentMgr;
        index index.html;
        try_files $uri $uri/ /studentMgr/index.html;
 }