Vue 打包部署上線

1，VUE邏輯編寫完成后在當前項目下打包

npm run build

需要注意的是，當打包完畢后，需要將入口的index.html的項目dist路徑改成相對路徑

另外需要注意的一點是，一旦打包vue.js項目，需要確保項目內必須使用vue.js語法來寫功能，比如a標簽要替換成<router-link>, 傳統的window.location.href跳轉頁面也要換成this.$router.push({ path: '/home/first' })這種形式。

 

2，建立要部署上線的前端文件夾，放入dist ，src(static),,index 三個文件

3，登錄centos系統，運行 chmod 755 /root/video_vue 對項目文件授權

修改nginx 配置文件 vim /etc/nginx/conf.d/default.conf  增加下面的配置，這里前端服務默認監聽80端口

//后端管理系統入口
server {
    listen       8000;
    server_name  localhost;

    access_log      /root/myweb_access.log;
    error_log       /root/myweb_error.log;


    client_max_body_size 75M;

    location / {
        include uwsgi_params;
        uwsgi_pass 127.0.0.1:8001;
        uwsgi_param UWSGI_SCRIPT video_back.wsgi;
        uwsgi_param UWSGI_CHDIR  /root/video_back;
    }


    location /static {
        alias /root/video_back/static;
    }

    location /upload {
        alias /root/video_back/upload;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
//前端入庫配置
server {
    listen       80;
    server_name  localhost;

    access_log      /root/video_vue_access.log;
    error_log       /root/video_vue_error.log;


    client_max_body_size 75M;


    location / {

        root /root/video_vue;
        index index.html;

    }

    error_log    /root/video_vue/error.log    error;

}

需要注意的是端口不能重復監聽，所以之前的django服務需要讓出80端口，改成監聽8000，而uwsgi服務也需要讓出8000端口改成在8001端口運行服務

4，mypro_wsgi.ini配置文件改端口（后台項目根目錄下建立此文件）

[uwsgi]

    chdir           = /root/video_back
    module          = video_back.wsgi
    master          = true
    processes       = 3
    socket            = 0.0.0.0:8001
    vacuum          = true
    pythonpath      = /usr/bin/python3
    daemonize  = /root/video_back/uwsgi.log

5,重啟nginx服務

systemctl restart nginx.service

完成訪問測試

 

收工！！！