nginxÔõô°²ÅÅvueÏîÄ¿
½« vue ÏîÄ¿°²Åŵ½ nginx ¿ÉÌṩÉú²úÇéÐΰ²ÅŵĸßÐÔÄÜ¡£°ì·¨°üÀ¨£º¹¹½¨ vue ÏîÄ¿£ºÔËÐÐ npm/yarn build¡£ÉèÖà nginx£º½¨ÉèÐéÄâÖ÷»ú¿é£¬root Ö¸Ïò dist Îļþ¼Ð£¬index ÉèÖÃΪÈë¿ÚµãÎļþ¡£Æô¶¯ nginx£ºÖØмÓÔØ/Æô¶¯ nginx¡£»á¼ûÓ¦ÓóÌÐò£ºÍ¨¹ýÐéÄâÖ÷»úÃû»á¼û°²ÅŵÄÓ¦ÓóÌÐò¡£
ÔõÑù½« Vue ÏîÄ¿°²Åŵ½ Nginx
Ö±ÑÔ²»»ä£º
½« Vue ÏîÄ¿°²Åŵ½ Nginx ÊÇÔÚÉú²úÇéÐÎÖÐÍйܺÍÌṩ Vue Ó¦ÓóÌÐòµÄÒ»ÖÖ³£¼û×ö·¨¡£
Ïêϸ°ì·¨£º
1. ¹¹½¨ Vue ÏîÄ¿
Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
ÔËÐÐ npm run build »ò yarn build À´¹¹½¨ Vue ÏîÄ¿¡£
¹¹½¨Àú³Ì½«½¨Éè°üÀ¨ÄúµÄ¾²Ì¬Îļþ£¨html¡¢css¡¢js£©µÄ dist Îļþ¼Ð¡£
2. ÉèÖÃ Nginx
ÔÚ Nginx ÉèÖÃÎļþÖн¨ÉèÒ»¸öÐÂÐéÄâÖ÷»ú¿é¡£
½« root Ö¸ÁîÖ¸Ïò¹¹½¨µÄ dist Îļþ¼Ð¡£
½« index Ö¸ÁîÉèÖÃΪÄúµÄÓ¦ÓóÌÐòµÄÈë¿ÚµãÎļþ£¬Í¨³£ÊÇ index.html¡£
ʾÀýÉèÖãº
server { listen 80; server_name example.com; root /path/to/your-vue-project/dist; index index.html; location / { try_files $uri $uri/ /index.html; } }
µÇ¼ºó¸´ÖÆ
3. Æô¶¯ Nginx
ÖØмÓÔØ»òÆô¶¯ Nginx¡£
Äú¿ÉÒÔʹÓà nginx -t ¼ì²é Nginx ÉèÖÃÊÇ·ñÓÐÓï·¨¹ýʧ¡£
ʹÓà nginx -s reload ÖØмÓÔØ Nginx¡£
4. »á¼ûÓ¦ÓóÌÐò
ÔÚä¯ÀÀÆ÷Öлá¼û example.com »òÄúµÄÐéÄâÖ÷»úÃû¡£
ÄúÏÖÔÚÓ¦¸ÃÄܹ»¿´µ½°²ÅÅµÄ Vue Ó¦ÓóÌÐò¡£
ʹÓà Nginx °²ÅÅ Vue ÏîÄ¿µÄÓŵ㣺
ËÙÂʿ죬ÐÔÄܸß
¿ÉÀ©Õ¹ÐԺ͸߿ÉÓÃÐÔ
SSL/TLS Ö§³Ö£¬ÓÃÓÚÇå¾²ÅþÁ¬
·´ÏòÊðÀíºÍ¸ºÔØƽºâ¹¦Ð§
Ö§³Ö¶àÖÖ»º´æÕ½ÂÔ
ÒÔÉϾÍÊÇnginxÔõô°²ÅÅvueÏîÄ¿µÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡