学生管理系统-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;
 }
相关推荐
小盼江36 分钟前
水果生鲜农产品推荐系统 协同过滤余弦函数推荐水果生鲜农产品 Springboot Vue Element-UI前后端分离 代码+开发文档+视频教程
vue.js·spring boot·ui
初遇你时动了情1 小时前
react module.scss 避免全局冲突类似vue中scoped
vue.js·react.js·scss
烂蜻蜓2 小时前
Uniapp 设计思路全分享
前端·css·vue.js·uni-app·html
bin91532 小时前
DeepSeek 助力 Vue 开发:打造丝滑的二维码生成(QR Code)
前端·javascript·vue.js·ecmascript·deepseek
浪九天7 小时前
Vue 不同大版本与 Node.js 版本匹配的详细参数
前端·vue.js·node.js
尚学教辅学习资料8 小时前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游
IT、木易8 小时前
跟着AI学vue第五章
前端·javascript·vue.js
薛定谔的猫-菜鸟程序员8 小时前
Vue 2全屏滚动动画实战:结合fullpage-vue与animate.css打造炫酷H5页面
前端·css·vue.js
春天姐姐9 小时前
vue3项目开发总结
前端·vue.js·git
烂蜻蜓12 小时前
前端已死?什么是前端
开发语言·前端·javascript·vue.js·uni-app