Pembungkusan dan penggunaan Vue merentas domain

Kata Pengantar

Dalam pembangunan projek, kami sering menghadapi masalah merentas domain Kerana nama domain yang kami gunakan tidak konsisten dengan nama domain antara muka bahagian belakang, masalah merentas domain akan berlaku. Dalam persekitaran pembangunan, kita boleh menyelesaikan masalah merentas domain dengan mengkonfigurasi proksi, tetapi selepas pembungkusan dan penggunaan, kita perlu menggunakan kaedah lain untuk menyelesaikan masalah merentas domain. Artikel ini akan memperkenalkan cara menggunakan vue-cli3 untuk membungkus dan menggunakan merentas domain.

1. Apakah itu asal silang

Perkongsian Sumber Silang (CORS) ialah pengehadan dasar asal yang sama penyemak imbas, yang menghalang halaman web daripada mendapatkan sumber daripada sumber lain bermakna kedua-dua halaman mempunyai protokol, nama domain dan nombor port yang sama. Jika permintaan dimulakan daripada laluan sumber bukan asal, penyemak imbas akan menolak permintaan tersebut.

2. Beberapa mod pembungkusan vue-cli3

Dalam vue-cli3, pembungkusan dibahagikan kepada tiga mod:

1. Mod ujian (ujian binaan )
   Mod ujian akan membungkus kod kami ke dalam mod yang boleh dijalankan dalam persekitaran pembangunan, dan secara automatik mendayakan fungsi penyahpepijatan peta sumber.
2. Mod binaan (build-prod)
   Mod binaan akan memampatkan dan mengelirukan kod kami dan sesuai untuk digunakan dalam persekitaran pengeluaran.
3. Mod hasilkan dan pratonton (layan)
   mod layan akan hangat mengemas kini kod kami dan menyediakan perkhidmatan pratonton, sesuai untuk pratonton dan ujian semasa pembangunan.

3. Penggunaan pakej penyelesaian merentas domain

Apabila dibungkus dan digunakan merentas domain, kami perlu menggunakan nginx untuk proksi terbalik untuk menyelesaikan masalah merentas domain.

nginx ialah pelayan web berprestasi tinggi yang boleh dijalankan pada pelbagai sistem pengendalian seperti windows, linux dan mac. Ia sangat berkuasa dan boleh digunakan untuk proksi terbalik, pengimbangan beban, caching, dll.

1. Pasang nginx

Dalam persekitaran Linux, kita boleh memasang nigix melalui arahan berikut:

sudo apt-get update
sudo apt-get install nginx

2. Konfigurasikan nginx

Selepas memasang nginx, kita perlu mengkonfigurasi nginx untuk menyelesaikan masalah merentas domain.

Pertama, kita perlu mencari fail konfigurasi nginx, biasanya dalam /etc/nginx/conf.d/default.conf Kami membuka fail konfigurasi nginx melalui arahan berikut:

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

Kemudian cari segmen pelayan, seperti berikut:

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;
        #}
    }

Kita perlu mengkonfigurasi proksi terbalik di bawah segmen lokasi, contohnya:

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;
        }

Antaranya, alamat selepas proxy_pass hendaklah ditukar kepada anda Alamat API bahagian belakang, add_header menyelesaikan masalah merentas domain.

3. Ubah suai konfigurasi vue.config.js

Dalam vue-cli3, kami boleh mengkonfigurasi publicPath dalam vue.config.js untuk menjadikan fail yang dibungkus tidak Bergantung pada domain nama, konfigurasi khusus adalah seperti berikut:

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');
  }
}

Antaranya, /api ialah awalan alamat API bahagian belakang, dan konfigurasi sasaran ialah alamat API bahagian belakang.

4. Pakej dan gunakan

Selepas konfigurasi di atas, kami boleh membungkus dan menggunakan projek vue. Selepas pembungkusan selesai, kami menyalin semua fail dalam direktori /dist ke direktori akar konfigurasi nginx, biasanya /usr/share/nginx/html, dan kemudian kami mulakan semula perkhidmatan nginx:

sudo service nginx restart

Itu sahaja, kami telah berjaya melaksanakan pembungkusan dan penggunaan vue-cli3 merentas domain.

Ringkasan

Artikel ini memperkenalkan cara menggunakan proksi terbalik nginx untuk menyelesaikan masalah merentas domain pembungkusan dan penggunaan vue-cli3. Melalui konfigurasi di atas, kami boleh menyelesaikan masalah merentas domain dan menggunakannya dalam persekitaran pengeluaran. Sudah tentu, kita perlu memberi perhatian kepada isu keselamatan semasa proses penempatan, seperti mendayakan kebenaran akses pengguna untuk nginx, dsb. Sudah tentu, kami juga boleh menggunakan kaedah lain untuk menyelesaikan masalah merentas domain, seperti: jsonp, websocket, dsb.

Atas ialah kandungan terperinci Pembungkusan dan penggunaan Vue merentas domain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!