vue部署到Apache和nginx的配置

一、文件打包

1.先对vue的项目进行打包,cmd到项目目录下，执行命令
npm run build
打包完成后，会多了一个dict目录，项目目录如下所示：

对于我们来说，有用的文件有：

1.index.html文件
2.dist目录
3.我自己的图片目录static
把这三个文件及目录放到需要部署的apache和nginx指向的目录下，如下所示：

 

二、服务器配置vue的项目

对应的nginx的配置vhosts
 

erver {
        listen       80;
        server_name  www.majorvi.com;

        charset utf-8;

        root /web/html/majorvi;
        index index.php index.html index.htm;

        access_log  logs/majorvi.access.log;
        error_log       logs/majorvi.erro.log;

        location / {
            if (!-f $request_filename) {
                rewrite ^/(.+)$ /index.html last;
            }
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
     #   error_page   500 502 503 504  /50x.html;
     #   location = /50x.html {
     #       root   html;
     #   }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        location ~ \.php {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;

            fastcgi_split_path_info ^(.+\.php)(.*)$;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            # fastcgi_param PATH_INFO $fastcgi_path_info;
            fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        location ~ /\.ht {
            deny  all;
        }
}

如上代码最重要的要注意location /的配置，需要用rewrite进行处理，否则会出现访问网站首页没问题，其他页面刷新都会报404错误
 

对应的apache配置
vhost配置代码如下：
 

<VirtualHost *:80>
    DocumentRoot "D:\work\iview-project"
    ServerName www.iviewproject.com
    ErrorLog "logs/iview-error.log"
    CustomLog "logs/iview-access.log" common
</VirtualHost>

在项目根目录下建立.htaccess文件，代码如下
 

<IfModule mod_rewrite.c>
  Options +FollowSymlinks -Multiviews
  RewriteEngine On

  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(.*)$ index.html/$1 [QSA,PT,L]
</IfModule>

注意：rewrite没有配置好都会导致除了首页之外，手动刷新其他页面会导致白屏的问题，使用如上配置即可解决问题

三、运行项目
1.重启apache或者nginx

2.在hosts文件中做对应的映射
    127.0.0.1    www.iviewproject.com
3.在浏览器输入www.iviewproject.com即可访问，效果如下

注意：如果访问的过程中有对应的文件没有加载到，打开index.html的代码，看加载的main.js和vendor.js的名字和路径对不对

 

因为nginx.conf设置了用户

user  www-data www-data;

1.需要设置Php代码为www-data:www-data用户使用
chown -R www-data:www-data *
2.设置runtime文件夹下为777权限，保证日志/缓存能够有权限写入