


Cara menggunakan nginx untuk menggunakan projek vue2 di bawah sistem Windows
第一步:下载安装nginx
1、首先我们要去nginx的官网下载windows版本的nginx
2、点击下载链接后会下载得到如下一个nginx的压缩包:
3、解压nginx压缩包,这里需要注意了哈,nginx的解压路径不能存在中文,否则nginx服务会无法正常启动的哈,不信你试试
4、我们双击nginx.exe文件启动服务,细心观察的小伙伴会发现有一个黑色的弹窗一闪而过就消失了,那这就启动就完成了。
5、然后我们打开浏览器访问:http://localhost 如果出现如下界面则表示nginx服务成功启动!
6、如果无法正常访问的话可以先查看nginx目录下logs里面的日志文件,
造成无法正常启动的原因可能有如下两点:
a、检查解压nginx的路径是否存在中文
b、打开cmd命令行窗口输入如下命令,查看80端口是否被占用了,nginx默认启动的端口是80端口
netstat -ano | findstr 0.0.0.0:80
如果输入上面命令出现如下内容则表示端口被占用
7、如果端口被占用,我们需要修改nginx的默认启动端口,使用记事本打开conf目录下的nginx.conf配置文件
在保存后,将server下的端口号80修改为8081,然后重新启动nginx目录下的nginx.exe文件
如果还是无法正常启动,可以查看nginx目录下的logs目录里面的错误日志,然后自行百度一下
8、下面来简单介绍一下nginx的几个常用命令:
注意:需要在nginx目录下才能执行这些命令:
a、启动nginx:
E:\nginx-1.22.0>start nginx 或 E:\nginx-1.22.0>nginx.exe
b、停止nginx:
E:\nginx-1.22.0>nginx.exe -s stop 或 E:\nginx-1.22.0>nginx.exe -s quit
c、重新启动nginx:
E:\nginx-1.22.0>nginx.exe -s reload
当修改了配置文件nginx.conf的内容后,需要执行上面这条命令,修改的配置才会生效。
第二步:打包部署vue2项目
1、打包vue项目:
npm run build
2、执行上面命令后会把项目打包并输出到dist目录下(打包后的文件因个人而异,这里是我公司项目打包后dist目录下的内容)
3、在nginx目录下的html目录下新建一个static目录,并把刚刚打包后dist目录下所有文件都复制到static目录下
4、修改nginx.conf配置文件
担心图片你们复制不了,就把server里面添加的配置也粘贴到下面了:
server { # nginx启动监听的端口 listen 8081; # 可以是localhost和可以是本机ip地址,如果要给公司其他同事的电脑可以访问,需要 配置为本机的ip地址 server_name 192.168.1.104; # 配置页面中发送的请求代理到后端接口 location /api { #需要代理访问的后端服务器地址 proxy_pass http://10.8.5.42:8084; #重写以/api为baseURL的接口地址 rewrite "^/api/(.*)$" /$1 break; } location / { #程序根目录配置,也就是刚刚打包文件放置的目录 root E:\\nginx-1.22.0\\html\\static; index index.html index.htm; # 配置把所有匹配不到的路径重定向到index.html,vue-router的mode是history模式的情况下需要配置,否则会出现刷新页面404的情况 try_files $uri $uri/ /index.html; } }
在这里再详细说明一下上面添加的这些配置信息:
假设我现在把我windows系统上的nginx服务器的配置文件修改成上面这样子,然后启动nginx服务器,当我在浏览器中输入http://192.168.1.104:8081的时候,因为我的nginx服务器配置文件中的listen配置的端口是8081,所以浏览器的发送的http://192.168.1.104:8081这个请求会被端口为8081的nginx服务进行处理,然后会被location / {} 匹配,然后nginx就会找配置的root 路径下的index.html文件,并响应给浏览器,这时浏览器就可以访问到我们项目的页面了。
这样页面就可以访问了,但是页面中发送的请求怎么进行处理呢?
在vue项目中当我们在页面中发送请求的时候,我们打开浏览器调试工具会看到,我们发送的请求的协议、域名和端口号其实是和访问页面的协议、域名和端口号是一样的,但是真正后端服务器的接口请求地址不是这样的。
这时候我们就需要使用nginx一个强大的功能了,没错就是反向代理,我们可以配置nginx.conf文件,实现把页面中发送的请求都通过nginx进行反向代理访问真实服务器(其实这也是一种跨域的解决方案)。
假设后端服务器的地址是http://10.8.5.42:8084,请求后端服务的登录接口是http://10.8.5.42:8084/accounts/login,然后前端页面中发送的登录请求地址是:http://192.168.1.104:8081/api/accounts/login?userName=%E6%B2%88%E5%BF%A0%E6%98%8E&password=123456,这时我们就可以在nginx.conf配置文件中加入如下内容:
看到这里有些伙伴可能就有疑问了,配置文件中的 :
rewrite "^/api/(.*)$" /$1 break;
具体是什么意思,这里我刚刚开始也不理解????,后来查阅了很多资料,最终就理解通了,
这段配置的作用就是重写我们的请求地址,因为我这里前端页面发送的登录请求接口http://192.168.1.104:8081/api/accounts/login有加了个/api的baseUrl,但是真实的后端服务的登录接口http://10.8.5.42:8084/accounts/login是没有这个/api前缀的,所以我在这里需要重写前端发送的请求地址,把/api给去掉
当我们在nginx.conf配置文件中添加了上面这些配置后,需要执行nginx.exe -s reload命令来载入我们修改的配置,修改了配置文件一定要记得执行这条命令哦!,如果执行这个命令时出现下面的报错的话,不要慌!
出现这个问题的原因是:你的nginx并未启动,所以无法加载配置文件,你先执行start nginx命令启动nginx再执行这条命令即可!
Atas ialah kandungan terperinci Cara menggunakan nginx untuk menggunakan projek vue2 di bawah sistem Windows. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Kemas kini Sistem Windows STOPT: Gunakan Editor Dasar Kumpulan: Klik dua kali "Kemas Kini Auto" dan pilih "Dilumpuhkan". Menggunakan Editor Pendaftaran: Tetapkan nilai data "NoAutoupDate" hingga "1". Kelebihan: Sepenuhnya menghentikan kemas kini masa depan dan ruang penyimpanan percuma. Kekurangan: Peningkatan risiko keselamatan, kehilangan fungsi, dan masalah ketidakserasian. Nota: Gunakan hanya selepas memahami risiko, anda akan bertanggungjawab terhadap akibatnya.

Rangkaian wayarles memaparkan bahawa ia disambungkan tetapi tidak dapat mengakses internet adalah masalah yang sering dihadapi oleh ramai orang ketika menggunakan peranti elektronik. Walaupun isyarat Wi-Fi penuh, tetapi laman web tidak dapat dibuka atau video tidak dapat dilihat. Apakah masalahnya? Jangan risau, pemandu akan menyusun satu set lengkap penyelesaian masalah dan penyelesaian untuk anda hari ini untuk membantu anda dengan cepat memulihkan sambungan rangkaian. Mari kita pelajari bersama -sama ~ 1. Penghala atau penghala yang tidak normal untuk masa yang lama mungkin mengalami kemerosotan prestasi akibat haba, pengumpulan cache atau kegagalan sistem; Jika Lightmaster kehilangan komunikasi dengan pelayan pengendali, walaupun peranti menunjukkan bahawa ia disambungkan ke Wi-Fi, ia tidak akan dapat mengakses Internet. 1. Mulakan semula peranti rangkaian: Cabut plag penghala dan kucing optik, tunggu selama kira-kira 30 saat sebelum menghidupkan dan bermula lagi, supaya peranti dapat menetapkan semula sambungan. 2. Periksa tetapan

Tiada respons semasa mengklik pada bar tugas Win10? Menu permulaan tidak dapat dibuka? Ikon tidak boleh dihidupkan? Masalah -masalah yang seolah -olah kecil ini menyusahkan. Artikel ini telah menyusun 6 penyelesaian praktikal, yang meliputi memulakan semula penjelajah, membaiki komponen sistem melalui powerShell, pengecualian pemacu pemecahan, dan kaedah lain untuk membantu anda dengan cepat memulihkan penggunaan normal. Kaedah 1: Mulakan semula Windows Explorer Taskbar adalah sebahagian daripada penjelajah. Sebaik sahaja proses itu terperangkap atau kemalangan, bar tugas juga akan kehilangan tindak balasnya. Proses Operasi: 1. Tekan kekunci pintasan CTRL Shift ESC untuk memulakan Pengurus Tugas; 2. Cari "Windows Explorer" dalam proses, klik kanan untuk memilih "mulakan semula"; 3. Tunggu desktop menyegarkan, uji sama ada bar tugas dipulihkan

Pertama, checkandManuallyStartDependentservicesbyopeningservices.msc, locatingthefailingservice, reviewingitsdependenciestab, andensuringallrequiredservices (likedcomorrpc) arerunning.2.runsfc/scannowanddism/online/cleanup-image/exterhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhealhinanelevatedceRhealhealhealhinanelevatedceRhealhealhealhinanelevatedceRhealhealhealhinanelevated

Apabila membuka perisian atau permainan, segera tiba -tiba muncul bahawa "aplikasi tidak boleh bermula secara normal (0xc0000906)" muncul, dan banyak pengguna akan dikelirukan dan tidak tahu di mana hendak bermula. Malah, kebanyakan kesilapan ini disebabkan oleh rasuah fail sistem atau perpustakaan runtime yang hilang. Jangan tergesa -gesa untuk memasang semula sistem. Artikel ini memberikan anda beberapa penyelesaian yang mudah dan berkesan untuk membantu anda memulihkan program dengan cepat. 1. Apakah ralat 0xc0000906? Kod Ralat 0xC0000906 adalah pengecualian permulaan yang biasa dalam sistem Windows, yang biasanya bermaksud bahawa program tidak dapat memuatkan komponen sistem yang diperlukan atau persekitaran yang berjalan ketika berjalan. Masalah ini sering berlaku apabila menjalankan perisian atau permainan besar. Sebab utama mungkin termasuk: Perpustakaan Runtime yang diperlukan tidak dipasang atau rosak. Pakej pemasangan perisian tidak berkesudahan

Sebab -sebab umum untuk skrin hitam komputer tetapi masih berjalan termasuk masalah pemandu, kegagalan sambungan perkakasan atau kerosakan kad grafik. Penyelesaian dipaksa untuk memulakan semula, periksa sambungan monitor, cuba monitor atau pelabuhan yang berbeza, mengemas kini atau menggulung semula pemacu kad grafik, masukkan mod selamat untuk menyelesaikan masalah konflik perisian, periksa perkakasan seperti kad grafik dan memori, sahkan bahawa BIOS ditetapkan dengan betul, dan pulihkan sistem jika perlu; Jika anda ingin membezakan masalah perisian dan perkakasan, anda boleh menguji dalam mod selamat, perhatikan proses permulaan, gunakan alat diagnostik, menggantikan perkakasan, dan mendengar bunyi yang tidak normal komputer; Untuk mengelakkan kekambuhan, pastikan pemandu dikemas kini, memasang perisian tulen, sentiasa mengekalkan sistem, memberi perhatian kepada kestabilan pelesapan haba dan bekalan kuasa, mengelakkan overclocking, data sandaran secara kerap, dan memantau suhu perkakasan.

Pertama, sahkan bahawa peranti disambungkan ke Wi-Fi penghala sasaran atau disambungkan melalui kabel rangkaian; 2. Masukkan http://192.168.10.1 di bar alamat penyemak imbas dan tekan Enter; 3. Masukkan nama pengguna dan kata laluan yang betul (lalai sering admin/admin atau lihat bahagian belakang penghala); 4 Jika ia tidak dapat dibuka, periksa sama ada ia disambungkan ke rangkaian yang salah, sahkan alamat IP yang betul (anda boleh melihat gerbang lalai melalui IPConfig), mulakan semula penghala, ubah penyemak imbas atau matikan firewall; 5. Selepas log masuk, anda boleh mengubah suai kata laluan nama Wi-Fi, menetapkan pilihan keselamatan, mengkonfigurasi pemajuan port, membolehkan rangkaian tetamu, menaik taraf firmware, dan sebagainya; 6. Jika anda lupa kata laluan anda, anda boleh menetapkan semula tetapan kilang dengan menekan dan memegang lubang penetapan semula penghala selama 5-10 saat, tetapi semua konfigurasi akan dibersihkan.

Runthe.exefileasadministratorbyright-clickingitandelecting "RunasAdministrator"; ifecucfulful, kekal-successful, kekal-successful, ifeenablethisbygoingtoproperties → compateTab → periksa "runthisprogramaSadministrator" →
