VUE(5) : vue-element-admin[5] : 打包及nginx部署

Lxinccode

已于 2022-09-20 10:59:27 修改

阅读量1.2k

点赞数

分类专栏：前端文章标签： vue.js nginx 前端 vue打包及部署

于 2022-08-05 17:21:46 首次发布

本文链接：https://blog.csdn.net/Lxinccode/article/details/126181778

版权

前端专栏收录该内容

62 篇文章 3 订阅

订阅专栏

version

npm: 8.16.0

node.js: v17.3.0

@vue/cli 4.5.15

1.[vue.config.js]的 proxy配置

    proxy: {
      '/my-api': {
        target: 'http://127.0.0.1:40001', // 后端地址
        // target: 'localhost:8080/manage', // 原始地址
        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        pathRewrite: {
          '^/api': '/'
        }
      }
    }

2.[.env.development]

VUE_APP_BASE_API = '/my-api'

3.[src/api/user.js] 接口配置

export function getInfo(token) {
  return request({
    url: '/my-api/user/info',
    method: 'get',
    params: { token }
  })
}

后端完整接口地址为 : [http://127.0.0.1:40001/my-api/user/info]

4.打包

修改OpenSSL配置

set NODE_OPTIONS=--openssl-legacy-provider
export NODE_OPTIONS=--openssl-legacy-provider

打包

npm run build:prod

注 : 打包完成后会在当前目录生成[dist]文件夹

5.创建[nginx.conf]文件

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    #include /etc/nginx/conf.d/*.conf;

    server {
        listen 80;
        # gzip config
        gzip on;
        gzip_min_length 1k;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;


        location / {
        root /usr/share/nginx/html;
            gzip on;
            gzip_types text/plain application/json application/javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /my-api {
            proxy_pass http://10.45.141.183:40001;
            proxy_set_header   X-Forwarded-Proto $scheme;
            proxy_set_header   Host              $http_host;
            proxy_set_header   X-Real-IP         $remote_addr;
        }
    }
}

注 : proxy_pass 为后端接口的[地址:端口]

6.启动nginx容器

docker run -p 82:80 -d \
    --name=my_web --restart=always \
    -v /Users/liyue/web-vue/nginx.conf:/etc/nginx/nginx.conf \
    -v /Users/liyue/web-vue/dist:/usr/share/nginx/html nginx:1.21.4

注 : 需要挂载创建的[nginx.conf]文件和打包生成的[dist]文件夹