亲宝软件园·资讯

展开

vue打包后的线上部署Apache、nginx全过程

帆酱 人气:0

我们一般情况下将vue项目开发完成后会进行打包上线,本文介绍多种部署情况。

一、Apache服务器

1、vue路由mode:'hash'模式(带#号模式)

hash模式打包后可以直接丢到服务器上去,不会有路由上的问题,接口的话根据项目的路径写个全局配置就行了,这里不详细说。

2、vue路由mode:'history'模式(不带#号模式)

vue在history模式打包时,如果项目为二级目录,则在config→index.js→build→使用assetsPublicPath: '/dist/',在路由中,使用base: '/dist/'

否则为assetsPublicPath: '/dist/'

而对于打包完后css图片路径不对的情况:在build→utils.js→

(1)、部署于服务器根目录

首先,我们使用build将项目打包会得到一个dist文件夹

直接打开其中的index.htm页面会一片空白,但不会报错。需要将文件放置于服务器根目录,这里我用phpsyudy演示。

可是如果在其中某个路由刷新,则会出现404现象:

那是由于所有路由的入口都在index页面,直接从中间进入会迷失方向。此时需要在后台配置重定向方可解决。

apache需要修改httpd.conf:

(2)、部署于服务器二级或多级目录

当然,一台服务器上的项目非常多,不可能都部署在根目录,下面来部署二级目录

我们将服务器的根目录设置为two:

这是因为你的项目打包dist并不是你服务器访问的跟目录,访问是http://xxx.xxx.com/dist,跟目录访问:http://xxx.xxx.com;由于包并不是根目录router路由无法找到路径中的组件,解决方法:

方法一:

需要修改router中的index.js路由部分,在每个path中加上你项目名称就行了,这样就能够成功了

{
path: '/dist/',
redirect: '/dist/asd'
} 

方法二:

{
path: '/',
redirect: '/asd'
}(不变)

在mode: 'history',之后添加

base: '/dist/',(推荐使用)

注意:配置里也要改成相应的ErrorDocument 404 /dist/index.html

如果index.html 可以正常访问,但是引用的js,css等文件服务器响应均为404,则有可能打包后的资源使用了绝对根目录路径,因此将项目部署到特定目录下,其引入的资源路径无法被正确解析。

解决办法:

1、修改config => index.js => build => assetsPublicPath 中的'/'成为'./'

2、在build => util.js 里找到ExtractTextPlugin.extract增加一行:publicPath: '../../',主要解决背景图片路径的问题。

结果:

(3)、部署多个vue项目(推荐)

以上皆是配置于服务器根目录,但是如果我有多个vue项目要上线呢,这时就要用到.htaccess文件了。

我们打包两个dist文件,第二个取名dist2,,在每个项目的根目录(不是服务器根目录哦),新建.htaccess,里面写上

ErrorDocument 404 /dist/index.html和ErrorDocument 404 /dist2/index.html就行了,记得把相应的配置表里的设置删掉,不然会冲突。

结果:

二、nginx服务器

1、vue路由mode:'hash'模式(带#号模式)

hash模式打包后可以直接丢到服务器上去,不会有路由上的问题,接口的话根据项目的路径写个全局配置就行了,这里不详细说。线上代理这里也不说了。

2、vue路由mode:'history'模式(不带#号模式)

(1)、部署于服务器根目录

在vhosts.conf里配置:

server {
        listen       80;
        server_name  www.2.com 2.com;
        root   "C:\Users\Administrator\Desktop\dist_root";
        location / {
		root   C:\Users\Administrator\Desktop\dist_root;
            index  index.html index.htm index.php;
            error_page 404 /index.html;
        }
        location ~ \.php(.*)$ {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_split_path_info  ^((?U).+\.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;
        }
}

方法二:

location /{
 
        root   C:\Users\Administrator\Desktop\dist_root;;
        index  index.html index.htm;
 
        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }

(1)、部署于服务器二级目录

location /wx{
 
        root   C:\Users\Administrator\Desktop\dist_two;
        index  index.html index.htm;
 
        #error_page 404 /wx/index.html;
        if (!-e $request_filename) {
            rewrite ^/(.*) /wx/index.html last;
            break;
        }
    }

对于同一服务器下多个vue项目,设置也比较简单

location /dist {
		root   C:\Users\Administrator\Desktop\dist_two;
        index  index.html index.htm index.php;
        #error_page 404 /dist/index.html;
		if (!-e $request_filename) {
            rewrite ^/(.*) /dist/index.html last;
           	break;
        }
}
location /dist2 {
		root   C:\Users\Administrator\Desktop\dist_two;
           index  index.html index.htm index.php;
           #error_page 404 /dist2/index.html;
		if (!-e $request_filename) {
           rewrite ^/(.*) /dist2/index.html last;
           break;
        }
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论