vue项目打包部署到nginx

作者: deepwinter 分类: 前端 发布时间: 2019-05-24 11:03 点击量: 1,339 次阅读

原创文章,转载请注明出处,谢谢!

打包

npm run build

如果打包后得文件过大,应该比较大的组件改成按需加载,比如只用到了echarts中的折线图,那么应该只加载折线图就够了。


上传到服务器

将打包后的dist文件夹上传到服务器,比如重命名后放到以下路径:/usr/local/demo-app


配置nginx

nginx增加配置文件,yum安装的nginx配置文件目录在/etc/nginx/conf.d/,增加一个新的配置文件demo-app.conf,配置内容如下。

server {
  listen 80;
  server_name demo.xxx.com;

  # redirect http tp https
  return 301 https://demo.xxx.com$request_uri;
}

server {
  listen 443;
  server_name demo.xxx.com; #填写绑定证书的域名
  ssl on;
  root /usr/local/demo-app;
  index index.html;
  ssl_certificate cert/2245551_demo.xxx.com.pem;
  ssl_certificate_key cert/2245551_demo.xxx.com.key;
  ssl_session_timeout 5m;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
  ssl_prefer_server_ciphers on;
}

说明:
这里配置了SSL,具体nginx如何配置SSL请参考我的其他博文:Nginx部署SSL证书Nginx环境强制HTTP跳转(301)到HTTPS


重启nginx

检查配置是否正确:

nginx -t

重启nginx:

systemctl restart nginx

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注