Nginx部署vue项目,Nginx搭建一个静态资源服务器

本文详细介绍了在CentOS环境下使用Nginx部署Vue项目和静态资源的方法,包括Nginx的安装、Vue项目的编译及上传、Nginx配置文件的编辑与服务配置,以及如何通过不同端口访问部署的服务。

一.Nginx安装(Centos)

yum install -y nginx

 安装后启动nginx

service nginx start

通过ip或者域名访问以下,看看是不是启动成功了

二.Nginx部署vue

1.vue项目编译(推荐vue element-ui框架,方便,开发效率高)

npm run build

2.将编译好后的dist文件夹上传到centos服务器中

3.编辑nginx配置文件nginx.conf

vi /etc/nginx/nginx.conf

配置文件内容配置

 server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
            
        }
        }

include /etc/nginx/default.d/*.conf,我们可以在/etc/nginx/default.d文件夹下配置单个服务。

4.为自己的项目编辑配置文件(vue项目)

vi  /etc/nginx/default.d/vue.conf

   vue项目配置文件

server {
        listen       8081;
        server_name  localhost;
        root         /my/app/vue;

        location / {
            try_files $uri $uri/ /index.html;
        }

        error_page 404
            /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

5.重启Nginx或者重新加载。

service nginx restart

service nginx reload

可成功通过8081端口访问index.html文件。

 

 

三.Nginx同时部署静态资源服务

    1.编辑静态资源服务配置文件

server {
        listen       8002;
        server_name  localhost;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

         location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$  {
                root /my/images/;
                autoindex on;# 开启预览功能
            }

        error_page 404
            /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

通过8002端口可以访问/my/images下的静态资源。

 

 

四.总结

nginx可以同时启动多个服务,为多个服务提供统一入口。

(经验积累:nginx启动或者重启报错的时候,要耐心看日志,不要急躁)

### 部署Vue打包的静态页面至Nginx #### 准备工作 为了成功部署Vue应用到Nginx,需先完成几个准备工作。确保拥有已编译好的Vue项目文件以及正确安装并配置好Nginx环境[^2]。 #### 修改Vue项目的构建设置 对于Vue CLI创建的应用,默认情况下路由模式为`hash`,这会在URL中加入`#`字符来模拟完整的URL以便于浏览器历史管理。如果希望移除该符号,则应在vue.config.js内调整路由模式为`history`: ```javascript module.exports = { publicPath: './', configureWebpack: config => { if (process.env.NODE_ENV === 'production') { Object.assign(config.resolve.alias, { '@': path.resolve(__dirname, 'src') }) } }, devServer: { historyApiFallback: true, } } ``` 同时,在router/index.js里更改mode选项: ```javascript const router = new VueRouter({ mode: 'history', // 更改为'history' routes }) ``` 此改动使得应用程序能够利用HTML5 History API实现更友好的URL结构[^1]。 #### Nginx配置优化 为了让基于History Mode的工作方式正常运作,还需适当修改Nginx配置文件以处理重定向请求。编辑位于conf目录下的nginx.conf或特定站点配置文件site-available/default,添加如下规则: ```nginx server { listen 80; server_name localhost; location / { root html/dist; # 指向Vue build输出路径 try_files $uri $uri/ /index.html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } ``` 上述配置指示当访问不存在的具体资源时返回根目录下的`index.html`文件,从而允许单页应用(SPA)通过JavaScript动态更新视图而无需刷新整个页面[^3]。 #### 启动与验证 最后一步是在命令行工具中切换到Nginx安装位置并通过执行`start nginx.exe`(Windows环境下)[^5] 或者 `sudo service nginx start`(Linux系统)[^4] 来启动Web服务器。打开浏览器输入对应的IP地址或者域名即可查看部署效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乐闻x

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值