Node 路由返回vue打包资源，浏览器能成功下载资源但显示空白

问答

BBarryLiu1995发布于 8 年前最后回复 8 年前

741090

问题之处

在backend/index.js创建了HTTP服务，在浏览器地址栏输入http://localhost:8080/index.html这个地址预期效果就是：服务端就会返回frontend/dist/index.html资源，同时frontend/dist/index.html有相关css和js链接，就会下载下来然后渲染页面。但实际情况就是网页是空白，但在chrome devtool 的network调试监控没有报出错误。然后我使用postman调试相关链接，都是可以返回对应的文件。

相关代码：

http.createServer(function (request, response) {
    let url = request.url;
    console.log(url);
    let ext, filePath, contentType;
    ext = path.extname(url);
    ext = ext ? ext.slice(1) : 'unknown';
    contentType = MINE[ext];
    let contentTypeHeader = {
        "Content-Type": contentType
    };
    if (url.indexOf('/search?') !== -1) {
        ...
        ...
    } else if (url === '/robots.txt' || url === '/favicon.ico') {
        response.writeHead(200, contentTypeHeader);
        let readStream = fs.createReadStream(__dirname + url, 'utf8');
        readStream.pipe(response);
    } else {
        let tempPath = path.join('frontend/dist',url);
        let root = path.resolve(__dirname,'..');
        filePath = path.join(root, tempPath);
        console.log(filePath);
        response.writeHead(200, contentTypeHeader);
        let readStream = fs.createReadStream(filePath, 'utf8');
        readStream.pipe(response);
    }
}).listen(8080);

const MINE = {
    "css": "text/css",
    "js": "text/javascript",
    "html": "text/html",
    "ico": "application/octet-stream",
    "txt": "text/plain",
    "ttf": "application/octet-stream"
};
console.log("The server is running at port 8080");

chrome devtool：

实际情况

postman 调试：

postman调试

查看回复

mrtanweijie#18 年前

只访问到了入口，路由配置默认首页是什么

BarryLiu1995#28 年前

引用 mrtanweijie只访问到了入口，路由配置默认首页是什么

@mrtanweijie 你好，首页就是index.html，位于frontend/dist/index.html。还是你意思是说前端Vue这边默认的路由页面是什么？vue的路由配置如下： frontend/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/index.html',
      name: 'home',
      component: Home
    }
  ]
})