写个小项目时, 不想把Egg和Vue分开部署, 过于麻烦, 所以就研究了下如何让Egg给打包后的Vue提供静态服务
代码地址: https://github.com/klren0312/eggVueSpaTemplate
1.配置EggJS
- 在config/plugin.js中开启静态插件
static: {
enable: true,
}
- config/config.default.js中配置静态文件存放的文件夹
config.assets = {
publicPath: '/public/',
}
- 配置controller
读取index.html
文件, 以html
形式返回给请求方
'use strict';
const Controller = require('egg').Controller;
const fs = require('fs')
const path = require('path')
class PageController extends Controller {
async index () {
const { ctx } = this
ctx.response.type = 'html'
ctx.body = fs.readFileSync(path.resolve(__dirname, '../../public/index.html'))
}
}
module.exports = PageController;
'use strict'
module.exports = app => {
const { controller, router } = app
router.get('/', controller.view.page.index)
}
2.前端配置
- 编写复制脚本用于将打包后的文件复制到EggJS项目的
public
文件夹
const fs = require('fs')
const path = require('path')
/**
* 复制文件夹
* @param {*} src
* @param {*} dist
*/
const copyDir = function (src, dest) {
fs.mkdirSync(dest)
const files = fs.readdirSync(src)
for (let i = 0; i < files.length; i++) {
const current = fs.lstatSync(path.join(src, files[i]))
if (current.isDirectory()) {
copyDir(path.join(src, files[i]), path.join(dest, files[i]))
} else if (current.isSymbolicLink()) {
const symlink = fs.readlinkSync(path.join(src, files[i]))
fs.symlinkSync(symlink, path.join(dest, files[i]))
} else {
const oldFile = fs.createReadStream(path.join(src, files[i]))
const newFile = fs.createWriteStream(path.join(dest, files[i]))
oldFile.pipe(newFile)
}
}
}
/**
* 删除文件夹下所有文件
* @param {String} path 需要删除的文件夹
*/
function delDir(path) {
let files = [];
if (fs.existsSync(path)) {
files = fs.readdirSync(path);
files.forEach((file, index) => {
let curPath = path + "/" + file;
if (fs.statSync(curPath).isDirectory()) {
delDir(curPath); //递归删除文件夹
} else {
fs.unlinkSync(curPath); //删除文件
}
});
fs.rmdirSync(path);
}
}
const publicFolder = path.resolve('../app/public')
delDir(publicFolder)
copyDir(path.resolve('dist'), publicFolder)
- 配置package.json, 在执行
build
后, 将文件复制
"scripts": {
......
"build": "vue-cli-service build && node copyFolder.js",
......
},
网友评论