Question

我正在尝试在我的Web应用程序中实现html5mode。我正在使用Angular的ui路由器到达那里。客户端运作良好。每当我打开主网页（127.1.1.1:8080）时，它都会完美加载。点击链接到（127.1.1.1:8080/admin/dashboard）的按钮，它也可以完美加载。

刷新127.1.1.1:8080仍然没问题。

当我刷新127.1.1.1:8080/admin/dashboard的页面时，问题会引起。它给出了：

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://127.1.1.1:8080/admin/libs/components-font-awesome/css/font-awesome.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://127.1.1.1:8080/admin/assets/css/style.css".

似乎错误地获得了css风格。路径http://127.1.1.1:8080/admin/assets/css/style.css是错误的路径，而应该是http://127.1.1.1:8080/assets/css/style.css。我相信我将不得不重写我的server.js中的静态路径，我已经做到了。我还缺少什么？

server.js

var express = require('express'),
    app = express(),
    mongoose = require('mongoose'),
    bodyParser = require('body-parser'),
    api = require('./app/routes'),
    port = process.env.PORT || 8080; 

app.use('/app', express.static(__dirname + '/public/app'));
app.use('/assets', express.static(__dirname + '/public/assets'));
app.use('/libs', express.static(__dirname + '/public/libs'));

app.post('/api/user', api.post);
app.all('*', function(req, res, next) {
    res.sendFile('/public/index.html', { root: __dirname });
});

app.use(bodyParser.json()); 

app.listen('8080');
console.log('The magic happens on port 8080');

app.config.js

angular
    .module('app')
    .config(config);

config.$inject = ['$urlRouterProvider','$stateProvider','$locationProvider'];

function config($urlRouterProvider,$stateProvider,$locationProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('home', {
        url:'/',
        templateUrl: 'app/home/home.html',
        controller: 'HomeController',
        controllerAs: 'vm'
    })
    .state('admin', {
        url:'/admin',
        templateUrl: 'app/admin/admin.html',
        controller: 'AdminController',
        resolve: {app: check_logged}
    })
    .state('admin.dashboard', {
        url: '/dashboard',
        template: 'I could sure use a drink right dashboad.'
    })
    .state('admin.product', {
        url: '/product',
        template: 'I could sure use a drink right product.'
    })

    $locationProvider.html5Mode({
        enabled: true
    });
}

的index.html

    <head>
    <meta  http-equiv="content-type" content="text/html;" charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="/libs/materialize/dist/css/materialize.min.css"></link>
    <link rel="stylesheet" href="/libs/components-font-awesome/css/font-awesome.min.css"></link>
    <link rel="stylesheet" href="/assets/css/style.css">
    <base href="/">
</head>

Answer 1

尝试将CSS中的type属性添加到text/css，如下所示 -

 <link rel="stylesheet" type="text/css"  ref="/libs/materialize/dist/css/materialize.min.css">

该问题与mime-type有关。

ExpressJS在html5mode上更深层次的url链接期间呈现错误的静态路径

1 个答案: