服务器通过路由访问前端页面

服务器通过路由访问前端页面

服务器操作根据博客
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状态