У меня есть несколько сверстанных страниц, и мне нужно, чтобы по команде npm start страницы выводились в localhost:8080. Также нужно, чтобы все страницы рендерились в js, и страницы должны выводиться в соответствии с алиасом. Как можно выполнить эту задачу? Возможно вопрос глупый, но конкретного ответа я не нашел
2 ответа
Закинуть в папку с html проектом index.js с содержимим (примитивный серв.):
const http = require('http');
const url = require('url');
const fs = require('fs');
const setMime = {
css: 'text/css',
js: 'application/javascript',
html: 'text/html',
png: 'image/png',
webp: 'image/webp',
ttf: 'font/ttf',
woff2: 'font/woff2',
woff: 'font/woff',
eot: 'font/eot',
ico: 'image/x-icon',
wav: 'audio/x-wav',
ogg: 'audio/ogg',
mp3: 'audio/mpeg',
svg: 'image/svg+xml',
}
const define = function (req, res, postData) {
const urlParsed = url.parse(req.url, true);
let path = urlParsed.pathname;
prePath = __dirname;
if(path == '/'){
path = '/index.html'
}
fs.stat(prePath + path, function (err, stat) {
if (err == null && stat.isFile()) {
let type = path.split('.').pop(),
mime = 'text/plain',setHead = {}
if(typeof setMime[type] != 'undefined'){
mime = setMime[type]
setHead['Content-Type'] = mime
if(type != 'html'){
//setHead['cache-control'] = 'max-age=5184000'// кеш
}
}
res.writeHead(200, setHead);
let readStream = fs.createReadStream(prePath + path);
readStream.pipe(res);
return;
} else if (err == null && stat.isDirectory()) {
console.log('Some other error: ', err);
res.writeHead(404, {'Content-Type': 'text/plain'});
res.end("Not found!");
return;
} else {
console.log('Some other error: ', err.code);
res.writeHead(404, {'Content-Type': 'text/plain'});
res.end("Not found");
return;
}
});
};
let server = new http.Server(function (req, res) {
var jsonString = '';
res.setHeader('Content-Type', 'text/html');
req.on('data', (data) => {
jsonString += data;
});
req.on('end', () => {
define(req, res, jsonString);
});
});
server.listen(8080,()=>{
require('child_process').exec('start http://localhost:8080');
});
И вызвать его в консоли "C:\Users\Desktop\MainProjectName>node index.js"
Или для удобства сделать ярлык, и в его свойствах в самом начале изменить путь. Добавив в начало путь exe-шника ноды через пробел "C:\Program Files\nodejs\node.exe" "C:\Users\Desktop\MainProjectName\index.js"
Вам нужно реализовать сервер на node.js который будет отдавать статику (html) или рендерить страницу средсвами js (SSR), начните с изучения этой статьи - одно из распространенных решений на npde.js
для запуска через npm start - нужно в файле package.json добавить эту команду
PS. также можно реализовать фронтовую часть средствами React.js vue Ember.js ....
-
а как можно это реализовать на vue? Было бы отлично увидеть пример Commented 25 мар. 2021 в 7:52
-