Question

我服务器端和客户端，在服务器端我使用快递和< strong> mongodb ，在客户端即时使用gulp。

我的客户端使用 http://localhost:3000/ ，服务器端使用 http://localhost:3010/

我需要创建个人资料页 http://localhost:3000/profile 。

我使用 $ routeProvider

以角度配置我的路线

  function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);  
$routeProvider
  .when('/',{
    templateUrl: 'views/home.html',
    controller: 'homeCtrl'
  })
  .when('/profile',{
    templateUrl: 'views/profile.html',
    controller: 'profileCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
  $locationProvider.html5Mode(true);

}

当我点击网址<a href="profile">ACCOUNT</a>时，它可以正常工作，但如果我重新加载页面，我会无法获取/个人资料

我认为这是因为我需要在快递和 gulp 中配置我的路线。

index.js 服务器端

    const app = express();
    const cors = require('cors')
    const bodyParser = require('body-parser');
    const mongoose = require('mongoose');

    app.use(cors())
    app.use(express.static(__dirname+'/client'));
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());

    User = require('./models/user')
    Card = require('./models/card')

    // Connect to mongoose
    mongoose.connect('mongodb://localhost/minimind');
    const db = mongoose.connection;

    app.get('/', function(req,res){
      res.send('ok')
    });

    app.use('/api',require('./routes/cards'));


    app.listen(3010);
    console.log('Running on port 3010');

gulpfile.js 客户端

const gulp = require('gulp');
const sass = require('gulp-sass')
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();

const scripts = require('./scripts');
const styles = require('./styles');

var devMode = false;

gulp.task('default',['sass','js','html','browser-sync'])

gulp.task('sass', function(){
  gulp.src('./src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
})

gulp.task('js', function(){
  gulp.src(scripts)
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('./dist/js'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

gulp.task('html', function(){
  gulp.src('./src/templates/**/*.html')
    .pipe(gulp.dest('./dist/'))
    .pipe(browserSync.reload({
      stream: true
    }));
})

gulp.task('build', function(){
  gulp.start(['sass', 'js', 'html'])
})

gulp.task('browser-sync', function(){
  browserSync.init(null,{
    open: false,
    server: {
      baseDir: 'dist'
    }
  });
});


gulp.task('start', function(){
  devmode = true;
  gulp.start(['build','browser-sync']);
  gulp.watch(['./src/js/**/*.js'],['js']);
  gulp.watch(['./src/templates/**/*.html'],['html']);
  gulp.watch(['./src/sass/pages/*.scss'],['sass'])
  gulp.watch(['./src/sass/*.scss'],['sass'])
});

Answer 1

如果您使用的是 html5模式，则需要为 browserSync 添加其他设置，以重写应用程序index.html的所有路由，以便angular可以处理路由。<登记/>

您可以使用 connect-history-api-fallback 中间件（https://github.com/bripkens/connect-history-api-fallback）

要使用此中间件，您需要修改 browserSync 设置，如下所示：

const historyApiFallback = require('connect-history-api-fallback')

gulp.task('browser-sync', function(){
  browserSync.init(null,{
    open: false,
    server: {
      baseDir: 'dist',
      middleware: [ historyApiFallback() ]
    }
  });
});

使用Gulp配置Express路由

1 个答案: