深圳电器网站建设,设计网站推荐ps,网站建设两年免费维护,深圳附近建站公司一、项目架构
vue的项目必须要进行打包#xff0c;并部署在nginx服务器上的
二、vue的打包
1、修改vue.cofing.js文件
在该文件中添加publicPath属性#xff0c;值为./
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDepen…一、项目架构
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 routernew 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进程状态
[rootiZ2ze9412d3dcresdj7soqZ ~]# 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 --colorauto nginx 杀死nginx进程
[rootiZ2ze9412d3dcresdj7soqZ ~]# killall -9 nginx 启动nginx
[rootiZ2ze9412d3dcresdj7soqZ ~]# /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;}
