vue-cli + node.js + express 搭建本地项目

由于vue 打包后的dist文件不能直接运行 有时候打包后没有测试直接更新到服务器可能会出现问题
所以使用express搭建了一个本地服务器

做个记录

简单配置如下:

1、安装express-generator生成器

npm install express-generator -g

2、创建一个express项目

express projectName

3、进入项目目录，安装相关项目依赖

cd projectName
npm install

目录结构


把dist文件放在public里面

在app.js中
注释掉 app.use('/', indexRouter); 和 app.use('/users', usersRouter);

把 app.use(express.static(path.join(__dirname, 'public')));
改为 app.use(express.static(path.join(__dirname, 'public/dist')));

由于vue的history模式会导致刷新404 所以需要借助express的history插件来帮助重定向
npm install connect-history-api-fallback

导入

const history = require('connect-history-api-fallback');
app.use(history()); // 必须写在其他中间件之前