本文章前端代码是基于vue+webpack开发的
Nginx是一款轻量级的Web 服务器/反向代理服务器
首先，webpack配置如下
在开发过程中，我们是通过npm run dev在开发环境中运行代码
如果要部署到生产环境中，可以运行npm run build进行上线打包
打包完成后，会发现项目中多了dist这个文件夹
执行结果和webpack的配置文件一致。
代码被webpack打包完成后下一步就是部署到服务器上，此文仅适合于前端代码是部署在windows *** 作系统的nginx服务中。
这里假设：
Windows *** 作系统：windows server 2008 64位
Nginx服务：nginx-1122 64位
1下载nginx-1122 64位解压，假设nginx-1122放在D:nginx-1122目录中，nginx目录结构。如图下
2、前端代码放在D:nginx-1122html目录中，dist目录就是刚刚前端打包完的代码。如图下
3、在D:nginx-1122conf目录中，有个nginxconf配置文件，进行编辑这个文件
5、打开cmd控制台，进入目录D:nginx-1122中，用start nginx命令启动服务，然后用tasklist /fi "imagename eq nginxexe"，查看nginx服务是否启动。 4、如果改变配置文件时，需要用nginx -s reload 命令重启nginx工作进程。 5、关闭服务
4、假设前端的端口号为8082，如果端口号被占用，请修改为其它端口号。后台服务访问地址>
nginx -s stop
nginx -s quit 安全关闭
taskkill /F /IM nginxexe > nul 关闭所有nginx服务
在node 命令行窗口中创建demo_a文件夹
使用命令 npm init 初始化包，生成packagejson，定义indexjs为入口文件
新建webpackconfigjs，indexjs，app/subjs文件
安装关于webpack的包，安装环境为局部
打开node在webpackconfigjs配置，自动构建生成。在webpackconfigjs配置，用于创建服务器，并监听js变化刷新浏览器
输入subjs与indexjs文件内容，
在webpackconfigjs里面设置入口文件，输出文件，定义html自动构建插件，创建服务器配置。有点复杂 我建议你还是去后盾人去搜索视频教学 我就是在那里面学的 我也说不太清楚 你可以去看的
vite服务器的启动速度比webpack快。因为vite启动时不需要打包，不需要分析模块依赖关系，不需要编译，所以启动速度非常快。当浏览器请求所需的模块时，它会编译该模块。这种按需动态编译模式大大缩短了编译时间。项目越大，文件越多，vite的开发优势就越明显。Vite热更新比webpack快。在HRM中的vite，当一个模块的内容发生变化时，只需让浏览器重新请求该模块，而不需要像webpack一样重新编译该模块的所有依赖关系。
Vite很好用。只需要执行初始化命令，就可以得到一个预置的开发环境。可以得到一堆开箱即用的功能，包括:CSS预处理、html预处理、异步加载、分包、压缩、HMR等。使用复杂度介于Parcel和Webpack之间，但只暴露了少数配置项和插件接口。不会像Parcel那样在配置上不够灵活，也不会像Webpack那样需要知道loader和plugin的庞大生态，灵活性和复杂度适中。
文档地址before：可获取 node 服务 app 实例，执行中间件 *** 作
comporess：打开 gzip 压缩服务器可访问内容。暂时认为开发环境不开比较好，易于调试。
contentbase（非常重要）：Tell the server where to serve content from。可传多个路径，建议用绝对路径。
publicPath：determine where the bundles should be served from（把 bundled 文件放在定义目录下，默认为 ‘/’）
hot：是否开启热更新。设为 true 则会自动加载插件 ： webpackHotModuleReplacementPlugin
hotOnly：页面返回时是否不刷新页面，以防页面构建失败。
>
遇到的问题如图：
原因 ：是由于node的运行环境内存只有14g（网上查的），由于我们运行的项目过大，而超过了这个内存，所以我们需要增加这个内存限制。
解决：
解决方法如下：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）