express渲染dist文件夹下的html直接显示源码？

Question

我用vue生成的dist文件夹，自己起的一个server是可以的

var express = require('express');

var app = express();

app.use(express.static('./dist'));

module.exports = app.listen('90', (err) => {
  if (err) {
    console.log(err);
    return;
  }
  console.log('Listening at http://localhost:90\n');
});

浏览器可以看到效果，但是我想把它部署到express项目上的时候就有问题，网上的教程主要是把dist文件夹内容拷贝到已作为静态资源文件夹的public文件夹下面

app.use(express.static(path.join(__dirname, 'public')));

但是我启动express之后浏览器显示的是html源码

也尝试了一些方法，切换模板引擎（Node.JS Express渲染HTML，变成显示源码 问题及解决），但是没有效果，想问一下这个怎么解决？

Answer 1

关于这个问题我也遇到了，看了你们的回答之后我进行了尝试。
这里我留给后来者一个具体问题原因和解决办法。
关于设置express.static()的问题，设置方法很多种，并且都没有问题。
例：

    app.use('/', express.static(__dirname + '/html'));
    app.use(express.static(path.join(dirname, 'html')));

问题所在：

问题在于 静态文件 访问目录设置，不应该在 设置访问头 之后。
express.static()必须写在设置访问头之前,
express.static()必须写在设置访问头之前,
express.static()必须写在设置访问头之前.
重要问题说三遍！

正确例：

    let express = require('express'),
        app = express(),
        path = require('path');
    //看注释
    app.use('/', express.static(__dirname + '/html'));
    //app.use(express.static(path.join(__dirname, 'html')));
    //上面express.static()必须写在设置访问头之前，
    //写在下面就会出现代码部署时只显示代码,
    //不显示页面情况（最好写在引入模块之下，干扰最小）
    
    app.all('*', function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "X-Requested-With");
        res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
        res.header("X-Powered-By",' 3.2.1');
        res.header("Content-Type", "application/json;charset=utf-8");
        next();
    });

如果回答有错，留言修改

Answer 2

你这个启动的是dist文件夹里面的index.html还是public里面的index.html?

关于express渲染静态文件，
app.use(express.static(path.join(__dirname, 'public')));
你这个直接修改dist的路径就行了啊，不用拷贝到public里面，你这样的话public里面所有的东西都暴漏了，别人都可以拿到，不太安全，不建议这样操作