Vue packaging and deployment across domains

Preface

In project development, we often face cross-domain problems. Because the domain name we use is inconsistent with the domain name of the back-end interface, cross-domain problems will occur. In the development environment, we can solve cross-domain problems by configuring proxy, but after packaging and deployment, we need to use other methods to solve cross-domain problems. This article will introduce how to use vue-cli3 to package and deploy cross-domain.

1. What is cross-origin

Cross-Origin Resource Sharing (CORS) is a restriction of the browser’s same-origin policy, which prevents web pages from obtaining resources from other sources. Homology means that the two pages have exactly the same protocol, domain name and port number. If a request is initiated from a non-original source path, the browser will reject the request.

2. Several modes of vue-cli3 packaging

In vue-cli3, packaging is divided into three modes:

1. Test mode (build-test )
   The test mode will package our code into a mode that can be run in the development environment, and automatically enable the sourcemap debugging function.
2. Build mode (build-prod)
   Build mode will compress and obfuscate our code, which is suitable for deployment into a production environment.
3. Generate and preview mode (serve)
   serve mode will hot update our code and provide a preview service, suitable for preview and testing during development.

3. Packaged deployment cross-domain solution

When packaged and deployed cross-domain, we need to use nginx to perform reverse proxy to solve cross-domain problems.

nginx is a high-performance web server that can run on various operating systems such as windows, linux, and mac. It is very powerful and can be used for reverse proxy, load balancing, caching, etc.

1. Install nginx

In Linux environment, we can install nigix through the following command:

sudo apt-get update
sudo apt-get install nginx

2. Configure nginx

After installing nginx, we need to configure nginx to solve cross-domain problems.

First, we need to find the nginx configuration file. Generally, it is in /etc/nginx/conf.d/default.conf. We open the nginx configuration file through the following command:

sudo vim /etc/nginx/conf.d/default.conf

Then find the server segment, as follows:

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        #access_log  /var/log/nginx/host.access.log  main;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ .php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ .php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /.ht {
        #    deny  all;
        #}
    }

We need to configure the reverse proxy under the location segment, for example:

location /api {
            proxy_pass http://192.168.0.100:8080; # 后端API地址
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_http_version 1.1;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
            proxy_send_timeout 600;
            proxy_buffer_size 64k;
            proxy_buffers 4 64k;
            proxy_busy_buffers_size 128k;
            proxy_temp_file_write_size 128k;
            # 解决跨域
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            # 缓存时间，单位秒。这里设置的是6小时
            expires 21600s;
            # 收到304响应后，再次请求的时间间隔
            proxy_cache_valid 200 304 12h;
        }

Among them, the address after proxy_pass should be changed to your backend API Address, add_header solves the cross-domain problem.

3. Modify vue.config.js configuration

In vue-cli3, we can configure publicPath in vue.config.js to make the packaged files not Depends on the domain name, the specific configuration is as follows:

module.exports = {
  publicPath: '',
  devServer: {
    // 设置跨域代理
    proxy: {
      '/api': {
        target: 'http://192.168.0.100:8080', // 后端API地址
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  chainWebpack: (config) => {
    config.optimization.delete('splitChunks');
  }
}

Among them, /api is the prefix of the backend API address, and the target configuration is the backend API address.

4. Packaging and Deployment

After the above configuration, we can package and deploy the vue project. After the packaging is completed, we copy all the files in the /dist directory to the root directory of the nginx configuration, usually /usr/share/nginx/html, and then we restart the nginx service:

sudo service nginx restart

So far , we have successfully implemented vue-cli3 packaging and deployment across domains.

Summary

This article introduces how to use nginx reverse proxy to solve the cross-domain problem of vue-cli3 packaging and deployment. Through the above configuration, we can solve the cross-domain problem and deploy it in the production environment. Of course, we need to pay attention to security issues during the deployment process, such as enabling user access permissions for nginx, etc. Of course, we can also use other methods to solve cross-domain problems, such as: jsonp, websocket, etc.

The above is the detailed content of Vue packaging and deployment across domains. For more information, please follow other related articles on the PHP Chinese website!