服务器通过路由访问前端页面
服务器操作根据博客
npm run build 后index界面没东西
准备工作
下载工具
- Xshell 远程连接服务器终端
- Xftp 上传文件使用
都根据服务器用户名密码连接
前端文件准备
- npm run build (vue项目),在目录下会形成一个dist文件
如果 运行指令文件里的index里面没有东西
这里的确是css以及js文件的路径问题,但解决时并不需要手动改路径或者加一段判断去修改,最方便的办法时在项目打包前的vue.config.js里面将publicPath属性添加或者修改为 publicPath: ‘./’, 然后重新打包。
修改vue.config.js中
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: './'
})
- 将dist文件复制到服务器目录下 (记住路径)
相应指令
- 首先需要弄ngnix
ngnix -h//配置信息
whereis ngnix //ngnix安装路径
- 到相应目录,修改ngnix.conf文件
sudo vim ngnix.conf //sudo是linux系统管理指令,是允许系统管理员让普通用户执行一些或者全部
// 的root命令的一个工具,如halt,reboot,su等等。这样不仅减少了root用户的登录和管理时间
//,同样也提高了安全性。sudo不是对shell的一个代替,它是面向每个命令的。(百度百科)
在html标签下面添加
listen xxx;
server_name localhost;
location /puti
{
alias /xxx;
index index.html;
}
//如果遇到404,可能是默认端口80被占用,可以开放端口
apt install firewalld //下载命令
firewall-cmd --state //查看防火墙状态
systemctl start firewalld.service //开启防火墙
firewall-cmd --zone=public --add-port=3306/tcp --permanent //开启指定端口
// 如果报错403,似乎是ngnix无法匹配路由到指定目录下
// 修改 ngnix.conf最开头
user root root;
- 其他指令
sudo systemctl stop firewalld.service //停止防火墙服务
sudo service nginx start //开启ngnix服务
sudo ngnix -s reload //重载ngnix.conf并开启ngnix服务
sudo service nginx status //查看nginx状态