使用 Gulp 配置 Express 路由答案

【问题标题】：Configure Express routes using Gulp使用 Gulp 配置 Express 路由
【发布时间】：2018-11-16 10:42:02
【问题描述】：

我有一个服务器端和一个客户端，在服务器端我使用express和mongodb 并在 client 端 im 使用 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);

}

当我点击 url <a href="profile">ACCOUNT</a> 时，它可以正常工作，但如果我重新加载页面，我会得到 Cannot GET /profile

我认为这是因为我需要在 express 和 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'])
});

【问题讨论】：

标签： angularjs node.js express gulp

【解决方案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() ]
    }
  });
});

【讨论】：