為了讓用戶能方便地訪問我們的Vue應用,我們需要為它配置一個域名。下面將會詳細介紹如何去做。
首先,在你的服務器上配置一個nginx服務。
sudo apt-get update sudo apt-get install nginx
然后,在nginx配置文件中添加一個server配置塊:
server { listen 80; server_name example.com; location / { root /var/www/vue-app/; index index.html; } }
這個配置塊的作用是監聽80端口,當域名為example.com時,返回位于"/var/www/vue-app/"目錄下的index.html文件。當然這個目錄可以自由調整。
接下來將Vue應用打包為靜態文件,并將它們放在"/var/www/vue-app/"目錄下。
npm run build cp -r dist/* /var/www/vue-app/
這樣我們的Vue應用就會被打包為靜態文件,并放在了"/var/www/vue-app/"目錄下。靜態文件的地址就是server_name指定的域名。
如果你的Vue應用沒有使用路由,完工了。
如果你的Vue應用使用了路由,還需要讓nginx對路由進行配置,讓其可以正常訪問。
這可以通過添加一個"/"的location來實現。修改nginx配置文件如下:
server { listen 80; server_name example.com; location / { root /var/www/vue-app/; index index.html; } location /api/ { rewrite ^/api/(.*) /$1 break; proxy_pass http://localhost:8080; } location / { try_files $uri $uri/ /index.html; } }
這樣通過訪問example.com/a,就會訪問到Vue應用的"/a"路由。
最后重啟nginx服務以使配置生效。
sudo systemctl restart nginx
至此,我們就完成了Vue應用的域名配置。希望這篇文章對你有幫助。
上一篇vue 重復上次請求
下一篇c 里的json格式