Nodejs原生实现开发生产环境编译打包

最新推荐文章于 2025-10-24 12:35:45 发布

原创

最新推荐文章于 2025-10-24 12:35:45 发布 · 5.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#nodejs #环境变量 #编译打包 #静态服务器 #打开默认浏览器

一、创建项目结构

1.创建根目录

创建项目名为node-builder的文件夹

2.创建业务源码

1.在根目录下创建src文件夹
2.在src目录下创建index.html、css/index.css、js/index.js、img/logo.svg

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>node-builder</title>
	<link rel="stylesheet" href="./css/index.css">
</head>
<body>
	<header>
	    <div class="container">
	        <div id="logo">
	            <img src="./img/logo.svg" alt="node.js" />
	        </div>
	    </div>
	</header>
	<main>
	    <p>您将要跳转的地址是：APP_BASE_URL</p>
	    <button>点击跳转</button>
	</main>
	<script src="./js/index.js"></script>
</body>
</html>

css/index.css

body {
   
   
    margin: 0;
}

header {
   
   
    padding: 15px;
    background-color: #333;
    text-align: center
}

header>.container {
   
   
    overflow: visible
}

#logo {
   
   
    display: block;
    border: none
}

#logo:hover {
   
   
    background-color: transparent;
    text-decoration: underline
}

#logo img {
   
   
    display: block;
    margin: .5em auto 0;
    border: none;
    max-height: 75px;
    max-width: 180px
}

main {
   
   
    padding: 100px;
    text-align: center;
    font-size: 36px;
}

button {
   
   
    font-size: 32px;
}

js/index.js

const btnEle = document.querySelector('button');
btnEle.addEventListener('click', () => {
   
   
    window

最低0.47元/天解锁文章