vue前端部署正式环境 时执行npm run build报Built files are meant to be served over an HTTP server.Opening index.html over file:// won't work.,浏览器访问vue.catcook.top报nginx Internal Server Error

VUE & HTML5 · hillmay2015 · 于 9个月前 发布 · 2026 次阅读

1.按照github上 yii2_fecshop_docker,和vue_fecshop_appserver文档安装部署的项目本地测试可以访问appserver.catcook.top可以访问 接口能返回数据

2.vue模块相关的配置文件如下

3.执行nmp run dev

4.访问本地8080端口,访问ok

5.执行 npm run build 报 Built files are meant to be served over an HTTP server.Opening index.html over file:// won't work.

5. 这个是nginx配置文件,vue模块访问路径如图

6.appserver模块跨域配置Helper.php文件

7.浏览器访问 vue.catcook.top报错 报500 Internal Server Error nginx

8.查看目录/www/web/yii2_fecshop_docker/services/web/nginx/logs 下nginx报错日志为

2019/04/29 05:16:05 [error] 9#9: *103932 rewrite or internal redirection cycle while redirect to named location "@handler", client: 171.88.42.103, server: vue.catcook.top, request: "GET /favicon.ico HTTP/1.1", host: "vue.catcook.top", referrer: "http://vue.catcook.top/"

本文由 hillmay2015 创作,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。

共收到 12 条回复 问题提问
Fecmall#19个月前 0 个赞

1.看你截图, npm run build 的时候成功了啊,没有报500 Internal Server Error nginx

2.如果vue访问的域名和appserver对应的域名不一致,请注意跨域问题

hillmay2015#29个月前 0 个赞

@Fecshop #1楼 appserver 模块中Helper.php文件已按照文档配置了跨域域名,请看帖子最后一张图

Fecmall#39个月前 0 个赞

我有个疑问

npm run build报500 Internal Server Error nginx 这个是nginx配置文件

npm run build, 构建的时候,怎么会报错nginx的错误?是不是你写错了

这个报错,貌似我帮不上忙。

4楼 已删除.
hillmay2015#59个月前 0 个赞

@Fecshop [[[#3楼](#comment3)](#comment3)](#comment3)

两个疑问,如下

1.npm run build报 Built files are meant to be served over an HTTP server.Opening index.html over file:// won't work**

2.请问vue_fecshop_appserver 是下载/www/web/yii2_fecshop_docker/app/fecshop/目录还是docker-compose exec php bash 进入PHP容器 下载到/www/web/fecshop/目录?

Fecmall#69个月前 0 个赞

1.vue_fecshop_appserver 部分没有使用docker,需要自己搭建。

原理商,目录随便放,nginx容器做指向即可,但是,按照fecshop docker里面默认的配置,参看第2条

2.在nginx容器可以看到: https://github.com/fecshop/yii2_fecshop_docker/blob/master/services/web/nginx/conf/conf.d/default.conf

# VUE
server {
    listen     80;
    server_name vue.fecshop.com;
    root  /www/web/vue_fecshop_appserver/dist ;
    server_tokens off;
    include none.conf;
    index index.php index.html index.htm;
    access_log /www/web_logs/access.log wwwlogs;
    error_log  /www/web_logs/error.log  notice;
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires      30d;
    }

    location ~ .*\.(js|css)?$ {
        expires      12h;
    }
}

nginx容器构建配置文件:https://github.com/fecshop/yii2_fecshop_docker/blob/master/docker-compose.yml#L9 ,可以看到,将宿主主机的文件挂载到了nginx容器中

volumes:  
	./app:/www/web

那么你把文件复制到宿主主机的./app就相当于nginx容器里面的/www/web

因此,按照默认的nginx配置,vue_fecshop_appserver 下载到宿主主机/www/web/yii2_fecshop_docker/app

下载后,在/www/web/yii2_fecshop_docker/app/vue_fecshop_appserver中执行npm run build

hillmay2015#79个月前 0 个赞

我的域名为catcook.top

其中vue_fecshop_appserver项目放在/www/web/yii2_fecshop_docker/app/fecshop目录下

/www/web/yii2_fecshop_docker/services/web/nginx/conf/conf.d目录下nginx配置为

server {
    listen     80;
    server_name vue.catcook.top;
    root  /www/web/vue_fecshop_appserver/dist ;
    server_tokens off;
    include none.conf;
    index index.php index.html index.htm;
    access_log /www/web_logs/access.log wwwlogs;
    error_log  /www/web_logs/error.log  notice;
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires      30d;
    }

    location ~ .*\.(js|css)?$ {
        expires      12h;
    }
}

为啥访问一直报服务器500 Internal Server Error?是我忽略了什么配置吗??

我看/www/web/yii2_fecshop_docker/services/web/nginx/conf/conf.d目录下none.conf配置为

location / {
    index index.html index.php; ## Allow a static html file to be shown first
    try_files $uri $uri/ @handler; ## If missing pass the URI to Magento's front handler
    expires 30d; ## Assume all files are cachable
}

location  /. { ## Disable .htaccess and other hidden files
    return 404;
}

location @handler { ## Magento uses a common front handler
    rewrite / /index.php;
}

location ~ .php/ { ## Forward paths like /js/index.php/x.js to relevant handler
    rewrite ^(.*.php)/ $1 last;
}

/www/web/yii2_fecshop_docker/services/web/nginx/logs/error.log报错日志为

2019/04/29 14:58:05 [error] 7#7: *1462 rewrite or internal redirection cycle while redirect to named location "@handler", client: 117.173.130.165, server: vue.catcook.top, request: "GET /favicon.ico HTTP/1.1", host: "vue.catcook.top", referrer: "http://vue.catcook.top/"

需要修改none.conf配置吗?

hillmay2015#89个月前 0 个赞

www/web/yii2_fecshop_docker/app/fecshop/appserver/web目录下 修改index.php文件内容为自己的域名

<?php
/**
 * 【Appserver端性能优化】:如果vue和appserver是不一样的域名,对于这种跨域的前端和后端交互,需要cros机制,具体您可以自己查阅
 * 原理为:第一次发送options请求,如果请求成功,获取服务端允许的请求类型,然后再发起具体的数据请求
 * 对于options请求,不涉及到数据,因此直接返回即可,因此下面加了下面的代码
 * 对于下面的设置的允许的值,是fecshop目前允许的,如果您添加了其他的,请在下面自行修改
 * 下面的cros的信息要和 @fecshop/app/appserver/modules/AppserverTokenController.php 这个文件里面的设置要一致。
 * 默认,下面是注释掉,您可以根据自己的情况,取消掉下面的注释,让options请求在index.php文件执行的时候直接返回,节省资源。
 */ 

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    $cors_allow_headers = ['fecshop-uuid','fecshop-lang','fecshop-currency','access-token'];       
    header('Access-Control-Allow-Origin: vue.catcook.top');
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, ".implode(', ',$cors_allow_headers));
    header('Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS');
    exit;
}

error_reporting(E_ALL & ~E_NOTICE & ~E_COMPILE_WARNING ); //除去 E_NOTICE E_COMPILE_WARNING 之外的所有错误信息
ini_set('session.cookie_domain', '.catcook.top'); //初始化域名,
$http = ($_SERVER['SERVER_PORT'] == 443) ? 'https' : 'http';
$homeUrl = $http.'://'.$_SERVER['HTTP_HOST'].rtrim(dirname($_SERVER['SCRIPT_NAME']), '\\/');
/**
 * fecshop 使用合并配置(config)数组进行加速,true 代表打开。
 * 打开配置加速开关前,您需要执行 http://domain/index-merge-config.php 进行生成单文件配置数组。
 * 注意:打开后,当您修改了配置,都需要访问一次上面的链接,重新生成单文件配置数组,否则修改的配置不会生效
 * 建议:本地开发环境关闭,开发环境如果访问量不大,关闭也行,如果访问量大,建议打开
 * 
 */
$use_merge_config_file = false; 
 
defined('YII_DEBUG') or define('YII_DEBUG', true);
defined('YII_ENV') or define('YII_ENV', 'dev');
defined('FEC_APP') or define('FEC_APP', 'appserver');

require(__DIR__ . '/../../vendor/autoload.php');
require(__DIR__ . '/../../vendor/fancyecommerce/fecshop/yii/Yii.php');

require(__DIR__ . '/../../common/config/bootstrap.php');

require(__DIR__ . '/../config/bootstrap.php');

if($use_merge_config_file){
	$config = require('../merge_config.php');
}else{
	$config = yii\helpers\ArrayHelper::merge(
		require(__DIR__ . '/../../common/config/main.php'),
		require(__DIR__ . '/../../common/config/main-local.php'),
		require(__DIR__ . '/../config/main.php'),
		require(__DIR__ . '/../config/main-local.php'),
        
		# fecshop 公用配置
		require(__DIR__ . '/../../vendor/fancyecommerce/fecshop/config/fecshop.php'),
		# fecshop 入口配置
		require(__DIR__ . '/../../vendor/fancyecommerce/fecshop/app/appserver/config/appserver.php'),
		
		# thrid part confing
		# 第三方 公用配置
        require(__DIR__ . '/../../common/config/fecshop_third.php'),
        # 第三方 入口配置
        require(__DIR__ . '/../config/fecshop_third.php'),
        
		# 本地 公用配置
		require(__DIR__ . '/../../common/config/fecshop_local.php'),
		# 本地 入口配置
		require(__DIR__ . '/../config/fecshop_local.php')
		
	);
}

$config['homeUrl'] = $homeUrl;

/**
 * yii class Map Custom 
 */ 
$yiiClassMap = yii\helpers\ArrayHelper::merge(
    require(__DIR__ . '/../config/YiiClassMap.php'),
    require(__DIR__ . '/../../common/config/YiiClassMap.php')
);
if(is_array($yiiClassMap) && !empty($yiiClassMap)){
	foreach($yiiClassMap as $namespace => $filePath){
		Yii::$classMap[$namespace] = $filePath;
	}
}

/**
 * Yii 重写block controller model等
 * 也就是说:除了compoent 和services,其他的用RewriteMap的方式来实现重写
 * 重写的类可以集成被重写的类
 */ 
$yiiRewriteMap = yii\helpers\ArrayHelper::merge(
    require(__DIR__ . '/../config/YiiRewriteMap.php'),
    require(__DIR__ . '/../../common/config/YiiRewriteMap.php')
);
if(is_array($yiiRewriteMap) && !empty($yiiRewriteMap)){
	Yii::$rewriteMap = $yiiRewriteMap;
}


/**
 * 添加fecshop的服务 ,Yii::$service  ,  将services的配置添加到这个对象。
 * 使用方法:Yii::$service->cms->article;
 * 上面的例子就是获取cms服务的子服务article。
 */
new fecshop\services\Application($config['services']);
unset($config['services']);

$application = new yii\web\Application($config);
$application->run();
Fecmall#99个月前 0 个赞

1/请问,你的问题解决了?

2.npm run build error 500 Internal Server Error 这个是如何解决的?

3.您也是费了好些时间才解决,可否把你遇到的问题,完整的整理一下,方便后面遇到同样问题的人,方便他们解决问题?

hillmay2015#109个月前 0 个赞

@Fecshop [[[[[[#9楼](#comment9)](#comment9)](#comment9)](#comment9)](#comment9)](#comment9)

很遗憾,到现在我还没解决

问题如下

1.执行npm run build 后问题如下

2.浏览器访问 vue.catcook.top 报500 Internal Server Error

2019/04/30 01:21:07 [error] 6#6: 14 open() "/www/web/vue_fecshop_appserver/dist/favicon.ico" failed (2: No such file or directory), client: 171.88.42.103, server: vue.catcook.top, request: "GET /favicon.ico HTTP/1.1", host: "vue.catcook.top", referrer: "http://vue.catcook.top/" 2019/04/30 01:21:20 [error] 6#6: 14 rewrite or internal redirection cycle while redirect to named location "@handler", client: 171.88.42.103, server: vue.catcook.top, request: "GET / HTTP/1.1", host: "vue.catcook.top"

Fecmall#119个月前 0 个赞

1.第一个没有问题

2.第二个是nginx设置有问题,你可以在宿主主机的/www/web/yii2_fecshop_docker/app/vue_fecshop_appserver/dist 下面添加一个静态文件xx.html,用nginx访问试试这个html文件试试,先调好nginx,多琢磨琢磨原理/

hillmay2015#129个月前 0 个赞

@Fecshop #11楼 方式2 我尝试了 加了个静态页面 index_test.html在dist目录下,访问vue.catcook.top/index_test.html

也访问不了。

请问楼主是不是使用docker部署到正式环境的?? 那么我怀疑/www/web/yii2_fecshop_docker/services/web/nginx/conf/conf.d/none.conf配置可能有问题,

Fecmall#139个月前 0 个赞

@hillmay2015 #12楼 去学习下docker和nginx吧

基础知识帮不上。

添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册
Your Site Analytics