如何将VUE JS应用托管到NGNIX服务器？

发布于 2025-02-03 18:22:22 字数 855 浏览 2 评论 0原文

通过基本的NGINX配置托管应用程序（下面的示例配置），但这对于静态Web应用程序是有意义的。如何为VUE JS应用程序设置，我必须在其中运行NPM运行服务以启动应用程序。我只是构建应用程序，然后使用NPM运行构建，然后在某个地方复制构建/DIST文件夹。我在RHEL 8上尝试此操作。我的包装。JSON文件看起来像这样

{
   "name": ....
   ....
   "scripts":{
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     ...
   }
}

server {
    listen 80 default_server;
    listen [::]:80 default_server; 
    root /var/www/html;  
    index index.html; 
    server_name _;  
    location / {
       try_files $uri $uri/ =404;
    }
    location /api/ {
           proxy_pass http://localhost:8080/;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
    }
    
}

原文

going through basic nginx configuration to host an app ( sample config below) , but this makes sense for a static web app. how to set up for a vue js app, where i have to run the npm run serve to start app. do i just build the app , with npm run build and then copy the build/dist folder somewhere . i am trying this on RHEL 8. my package.json file looks like this

{
   "name": ....
   ....
   "scripts":{
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     ...
   }
}

server {
    listen 80 default_server;
    listen [::]:80 default_server; 
    root /var/www/html;  
    index index.html; 
    server_name _;  
    location / {
       try_files $uri $uri/ =404;
    }
    location /api/ {
           proxy_pass http://localhost:8080/;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
    }
    
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

农村范ル 2025-02-10 18:22:22

我这样主持，效果很好。

在/etc/nginx/nginx.conf中：

server {
    listen 80;
    server_name mysite.com;

    charset utf-8;
    root /var/www/mysite-folder;
    index index.html index.htm;

    location / {
            root /var/www/mysite-folder;
            try_files $uri /index.html;
    }

    include  /etc/nginx/mime.types;
}

您可以看到，所有编译的VUE文件我存储在/var/var/www/mysite-folder中

I host like this, and it works pretty fine.

In /etc/nginx/nginx.conf :

server {
    listen 80;
    server_name mysite.com;

    charset utf-8;
    root /var/www/mysite-folder;
    index index.html index.htm;

    location / {
            root /var/www/mysite-folder;
            try_files $uri /index.html;
    }

    include  /etc/nginx/mime.types;
}

And as you can see, all compiled Vue files I store in /var/www/mysite-folder

回复收藏 0 原文

~没有更多了~