Linux部署vue项目

一、nginx.conf配置文件位置：

   

          /etc/nginx/nginx.conf    

二、nginx的常用命令

1、启动 Nginx

	start nginx     或     systemctl start nginx

2、关闭 Nginx

	nginx -s stop

3、更新 Nginx 配置( nginx.conf )

	nginx -s reload

4、重启 Nginx

	nginx -s reopen   或    systemctl restart nginx

5、查看 Nginx 状态
    
    systemctl status nginx

三、Vue项目部署后，刷新页面出现404

location / {

    root   /root/mall_cms;      // 项目路径
    index  index.html;			//  html文件
    try_files $uri $uri/ @router;   //

}

//对应上面的@router
location @router {
    
    rewrite ^.*$ /index.html last;

}

                在nginx.conf的server 里配置  try_files  与  @router      详细见Vue Router官网     不同的历史模式 | Vue Router

四、部署到服务器 nginx配置

          单个项目配置：

location / {

    root   /root/mall_cms;      // 项目路径
    index  index.html;			//  html文件
    try_files $uri $uri/ @router;   //

}

//对应上面的@router
location @router {
    
    rewrite ^.*$ /index.html last;

}

           多个项目配置：            

一、修改vue.config.js文件里publicPath：

/**
*默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如*果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 *https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
*/

module.exports = defineConfig({

  // production 正式环境，development 开发环境
  publicPath: process.env.NODE_ENV === 'production' ? '/tubeLane/' : '/'

})

 二、路由中的base参数

let router = new VueRouter({
    
    base: process.env.NODE_ENV === 'production' ? '/tubeLane/' : '/',

    mode:"history"

    routes

})

 三、nginx配置，nginx.conf文件

 #配置根路径，html, rewrite：重定向到/piperack
 
 location / {
      root /usr/share/nginx/html;
      try_files $uri $uri/ index.html;
 }
  
 location  ^~ /piperack/ {
      #下面这一句是重点，意思就是将地址都导向/piperack/index.html
      try_files $uri $uri/ /piperack/index.html;
 } 
   
 location  ^~ /tubeLane/ {
     #下面这一句是重点，意思就是将地址都导向/tubeLane/index.html
     try_files $uri $uri/ /tubeLane/index.html;
 } 

Nginx服务器目录

完整代码

 server {
   
     /*  默认项

        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        #root         /usr/share/nginx/html;
	
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        add_header 'Access-Control-Allow-Origin' *;
 
       add_header 'Access-Control-Allow-Credentials' 'true';

       add_header 'Access-Control-Allow-Method' *;

       add_header 'Access-Control-Allow-Headers' *;   
     
     */
    
     /*    修改项
     
        #配置根路径，html, rewrite：重定向到/piperack
 
        location / {
           root /usr/share/nginx/html;
           #index index.html;
           try_files $uri $uri/ index.html;
        }
  
        location  ^~ /piperack/ {
           #下面这一句是重点，意思就是将地址都导向/piperack/index.html
           try_files $uri $uri/ /piperack/index.html;
        } 
   
        location  ^~ /tubeLane/ {
          #下面这一句是重点，意思就是将地址都导向/tubeLane/index.html
          try_files $uri $uri/ /tubeLane/index.html;
        } 
 
     */    

     /*  默认项

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }

     */

    }

四、反向代理

//前端项目代理配置名  /consumapi
location /consumapi/{
    //不知道什么作用当时加上就有用了  不加上就没有用
    rewrite ^.+consumapi/?(*)$ /$1 break;
    //转到什么地址
    proxy_pass 接口地址（http://xxx.xx.xx.xx:xxxx）
}