【记录】个人项目网站上线部署的过程-前端

226 阅读1分钟

配置多环境文件

  1. 在根目录下新建两个文件,.env.dev和.env.prod。 前一个文件参考配置:
NODE_ENV=development
VUE_APP_SERVER=http://127.0.0.1:8081 // 该项是一个自定义配置,以VUE_APP开头。
  1. 把axios路径换成从配置文件中读取
axios.defaults.baseURL = process.env.VUE_APP_SERVER+'/api/v1/'

在nginx配置读取静态资源

在etc/nginx/conf.d/下加入两个配置文件,

// web.conf
server{
  listen 80;
  server_name www.xx.com // 这里写上域名

  location / {
    alias /root/web/; // 对应打包后的文件路径
    index index.html;
    try_files $uri $uri/ /index.html;
    error_page 405 =200  $request_uri; // 加上这个防止405
  }

}
server.conf
server{

  listen 80;
  server_name server.xx.com;
  
  location / { 
     proxy_pass http://localhost:8080;  
  }
}

配置完成后需要用nginx -s reload命令重新加载一下nginx

上传文件

把vue打包后的文件传上去就好了。注意和前面配置文件中的路径保持一致。