将一个Vue项目部署的腾讯云ubuntu服务器nginx上

将一个Vue项目部署的腾讯云ubuntu服务器nginx上

1.要操作linux服务器需要两个工具xshell、xftp，可以免费申请使用

下载地址xftp
下载地址xshell

2.需要安装nginx

sudo apt-get install nginx

3.判断nginx是否安装成功

nginx -v

4.修改配置文件

vim /etc/nginx/nginx.conf 

配置文件我是这样设置的

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;


        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;

        ##
        # Virtual Host Configs
        ##
        server {
              listen 8088;     #1.你想让你的这个项目跑在哪个端口
              server_name 49.234.97.57;     #2.当前服务器ip
        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # Virtual Host Configs
        ##
        server {
              listen 8088;     #1.你想让你的这个项目跑在哪个端口
              server_name 49.235.92.53;     #2.当前服务器ip，这是一个假设的地址,根据自己情况填写
       location / {
           root   /home/dist/;     #3.dist文件的位置(我是直接放在home目录下了)
            try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写)
       }
        location /api {  #4.当请求跨域时配置端口转发
            proxy_pass http://49.235.92.53/api; #5.转发地址
        }
       }
        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

6.对于Vue项目的进项打包,在Vue项目的目录运行该命令，会在该目录下生成dist文件夹

npm run build

7.将dist文件夹通过xftp上传到/home目录下

8.启动nginx服务器

service nginx restart

在对于Vue项目进行编译前要安装NodeJs以及配置相关可以参考我的将Vue项目跑起来

在遇到上传文件到服务器失败，原因多半是因为该文件夹的读写权限:

sudo chmod 777 /XXX

其中/XXX为你要更改得目录或文件，777为全部人都可以读写。用这个命令就可以设置文件限权。如果觉得不安全，可以设置为775