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

一、项目架构

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

二、vue的打包

1、修改vue.cofing.js文件

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

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

2、修改router/index.js文件

javascript 复制代码
const router=new VueRouter({
    routes,
    mode:'hash',
    base:'/studentMgr/'
})

3、打包

在终端上执行如下命令

javascript 复制代码
npm run build

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

三、项目上线部署

1、更改dist的名称

这里我将dist的名称改为studentMgr

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

3、修改nginx的配置文件

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

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

javascript 复制代码
location /studentMgr {
   alias /opt/studentMgr;
   index index.html;
}

4、重启nginx服务器

  • 通过xshell等命令行工具进入到linux

  • 查看nginx进程状态

javascript 复制代码
[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进程
javascript 复制代码
[root@iZ2ze9412d3dcresdj7soqZ ~]# killall -9 nginx
  • 启动nginx
javascript 复制代码
[root@iZ2ze9412d3dcresdj7soqZ ~]# /usr/sbin/nginx

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

  • 在etc/nginx/default.d文件中将配置项上添加tryfiles属性,具体配置如下
javascript 复制代码
location /studentMgr {
        alias /opt/studentMgr;
        index index.html;
        try_files $uri $uri/ /studentMgr/index.html;
 }
相关推荐
化作繁星17 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
林的快手4 小时前
CSS默认样式
前端·css·vue.js·chrome·css3
林涧泣8 小时前
【Uniapp-Vue3】开发userStore用户所需的相关操作
前端·vue.js·uni-app
皓月当空hy10 小时前
vue3中测试:单元测试、组件测试、端到端测试
vue.js
码上飞扬10 小时前
Vue.js组件开发:从基础到进阶
vue.js
昨日余光11 小时前
仅需三分钟,使用Vue3.x版本组件式风格实现一个消息提示组件!
前端·javascript·css·vue.js·typescript·html
Long_poem14 小时前
【自学笔记】Vue基础知识点总览-持续更新
前端·vue.js·笔记
CPU NULL16 小时前
【2025全网最新最全】前端Vue3框架的搭建及工程目录详解
前端·vue.js·框架·软件工程
2401_8848107417 小时前
Vue3笔记
前端·vue.js·笔记