Vue实战091：Vue项目部署到nginx服务器

目开发完成之后我们就需要将项目上线运行供用户访问，这时候我们就需要将项目部署到服务器上。对于Vue这种前端Web项目我们一般都部署在linux系统上，Linux常见的Web应用服务器有Apache、Nginx和Tomcat 。Nginx是一款高性能、低消耗的轻量级反代理服务器很适合中小型项目，这里选择Nginx服务器来部署Vue项目。

打包Vue项目

项目发布之前我们需要先将项目进行打包，Vue脚手架是利用webpack将前端代码通过编译、压缩，合并等操作，将代码进行整合优化并生成浏览器可直接识别的文件（如html，css，fonts、img、js等）。具体的打包介绍可以参考文章【Vue实战074：你真的了解了项目打包么？来普及下吧！】，这里我们直接通过命令：npm run build对vue项目进行打包，打包之后会在项目根目录生成一个dist 文件夹用来存放打包编译的文件。

Callback was already called错误

Vue-cli3.0在打包的时候会自动将js和css分开打包，把所有的css样式打包成一个个css文件。如果打包的时候遇到错误：Callback was already called，vue.config.js文件中配置css: {extract: false}}。该配置指定css是否使用分离插件ExtractTextPlugin（默认为true），将extract改成false则会将样式强制内联不生成单独的css文件。

Nginx测试

我们可以在Windows上用Nginx先测试下是否能正常的访问，在Windows使用Nginx可以参考文章【Nginx实战001：Window中配置使用Nginx入门】。将打包好的项目拷贝到nginx的html目录中，启动nginx并在浏览器地址栏输入网址 http://localhost:80访问项目。

Nginx服务部署

在本地测试没问题我们既可以开始部署了，先在服务器上安装nginx。Centos安装Nginx跟Ubuntu安装基本一样，这里就不再重复了，有需要可以参考文章【Linux实战008：Ubuntu搭建Nginx服务器详细图解】。我们把打包好的文件上传到nginx的html目录中（该目录一般在/usr/share/nginx/html），利用finalshell等工具可以快速将文件上传到服务器指定目录。

修改Nginx配置

docker的nginx基础配置文件一般存放在/etc/nginx文件夹下的nginx.conf文件中，默认的配置default.conf也存放在这里。我们的服务器配置就放在default.conf中，用户可以根据自己的项目需求来配置nginx。通过vim修改好之后执行命令:wq保存退出，再执行命令：sudo ./nginx -s reload重启下nginx即可（docker可以重启容器）。

总结：

Nginx默认配置的监听端口为80，如果当前端口已经被占用的话就可以在这里进行修改。具体的配置按照自己的项目需求进行修改，一般我们都在server中进行配置（一个server代表一个服务站点，可以配置多个server节点搭建多个站点）。以上内容是小编给大家分享的【Vue实战091：Vue项目部署到nginx服务器】。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：

为了方便学习，下面附上本文用到的源码：

、前言

最近想要部署一个纯前端的静态页面，项目的内容很简单，也就是一些简单的html、css、js、jpg、mp3等静态资源，不涉及后端开发。

之前一直都是使用Tomcat来部署项目的，因为涉及后端接口等方面的内容，这次再用它来部署纯前端的东西，显得大材小用，过于笨重。

此时，使用nginx，便是最合适的选择了，轻量、简单、灵活。

二、nginx安装下载

我的服务器是在腾讯云上买的，操作系统是Centos，Linux中的一种。

安装使用自带的命令yum即可

yum install nginx

三、nginx配置

安装完，nginx的相关目录就都有了，最重要的一个配置文件nginx.conf在于

/etc/nginx/nginx.conf

我们一般在这里配置完项目的相关信息的配置，如访问权限、访问端口、访问机器、访问项目、访问文件等：

#1.注意user使用root，以便轻松访问任何文件
user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    include /etc/nginx/conf.d/*.conf;

    server {
    #2.这里监听我们常用的80端口
        listen       80;
    #3.这里配置机器地址，一般是本机localhost
        server_name  localhost;
    #4.这里配置项目根路径
        root         /root/love;
    #5.这里配置项目的访问页面
	   index        index.html; 
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

      location / {
        }

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

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