Linux的nginx環境的vue 部署

作者QQ：1095737364    QQ群：123300273     歡迎加入！

1.使用WebStrom編程好的vue 進入到Terminal運行npm run build

         

2.使用WinSCP進入到nginx 目錄配置文件下面,找到nginx.conf文件:

　　1.使用WinSCP打開PUTTY命令行:輸入: find / -name nginx

         

　　2.配置文件nginx.conf 就在/uer/local/nginx/conf下面,/usr/local/nginx/sbin/nginx是運行目錄:

3.修改nginx.conf配置文件,在http下面添加一行代碼:include vhost/*.conf; 表示每個項目單獨配置,方便管理.

         

4.conf文件夾下面建立vhost文件夾,再在vhost 下面建立vue.conf 放入一下內容:

　　　　

server
{
　　listen 80;
　　server_name vue.****.com;
　　index index.html index.htm index.php;
　　root /var/www/html/find;
　　location / {
　　　try_files $uri $uri/ @router;
　　　　index index.html;
　　}
 
　　location @router {
　　　　rewrite ^.*$ /index.html last;
　　}
}
server # 可以同事設置多個服務.
{
　　listen 8090; # 可以設置端口號.
　　server_name 180.*.*.42; # 可以設置為IP.
　　index index.html index.htm index.php;
　　root /var/www/html/find; # 設置文件的存放路徑,一般都在html 下面新建一個文件見,存放當前目錄
　　#防止404找不到
　　location / {
　　　　try_files $uri $uri/ @router;
　　　　index index.html;
　　}
　　location @router {
　　　　rewrite ^.*$ /index.html last;
　　}
　　access_log off;
}

 

5.進入到配置文件中設置的root路徑,將WebStrom的vue項目的dist目錄下的文件復制到此目錄下面來,並且設置文件夾的權限:

         

         

6. 使用PUTTY命令行:執行以下命令:

# ps -ef | grep nginx

# kill -9 進程號 //如果有多個,就全部殺死

# cd /usr/local/nginx/sbin

# ./nginx -t

       

　　 # ./nginx -s reload //如果報一下錯誤就在執行這個命令一次: # /usr/local/nginx/sbin/nginx

　　

       

 

　 　# ./nginx -s reload //不報錯就說明啟動成

7.然后在瀏覽器中訪問 http://IP:端口號

 

 

版權聲明： 本文有 ```...襇簞點 發表於 bloghome博客

轉載聲明： 可自由轉載、引用，但需要屬名作者且注明文章出處。

文章鏈接： https://www.bloghome.com.cn/user/yysblog