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

目录

• 一、Apache服务器
• 二、nginx服务器
• 总结

我们一般情况下将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：

• 第一步：将 LoadModule rewrITe_module modules/mod_rewrite.so 打开,
• 第二步：修改Directory的Allowoverride为all，注意配置文件中有很多Directory，不要该错了，否则不会生效的，Directory一定是你apache服务的根目录。
• 第三步：文件最后添加：ErrorDocument 404 /index.htML (也可写在vhosts.ini的VirtualHost标签的末尾)
• 结果：完美运行：

@H_126_74@

(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;
        }
}
    

总结

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

• Vue项目打包并部署nginx服务器的详细步骤
• vue项目打包部署_nginx代理访问方法详解
• Vue中跨域及打包部署到nginx跨域设置方法

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！