Vue使用日记（17）：搭建本地服务器

最新推荐文章于 2023-09-15 16:48:44 发布
最新推荐文章于 2023-09-15 16:48:44 发布
阅读量396 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jimson_zhu/article/details/102628935
版权
Vue.js 专栏收录该内容
33 篇文章 3 订阅 ¥99.90 ¥299.90
订阅专栏
本文介绍了如何使用Webpack的devServer搭建本地开发服务器，实现浏览器自动刷新功能。通过设置contentBase和port属性，结合historyApiFallback，简化SPA页面的开发流程。详细配置过程包括在webpack.config.js中的设置，解决全局与局部环境的命令冲突，以及通过添加open参数实现自动打开浏览器展示项目。
摘要由CSDN通过智能技术生成

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现让浏览器自动刷新显示我们修改后的结果，而不用每次npm run build之后再点击index.html进行项目运行和查看效果。

不过它是一个单独的模块，在webpack中使用之前需要先安装它：

npm install webpack-dev-server@2.9.1 --save-dev

devServer也是作为webpack.config.js</

了解本专栏 订阅专栏 解锁全文
jimson_zhu
关注
专栏目录
订阅专栏
Vue使用日记（19）：Vue脚手架——Vue CLI详解
jimson_zhu的博客
10-21 215
如果我们只是简单写几个Vue的Demo程序，那么你不需要Vue CLI，而如果开发大型项目, 那么必然需要使用Vue CLI。 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作，那无疑效率低下，所以通常我们会使用一些工具来帮助完成这些事情。 Vue CLI就是这样一个工具。 1）CLI是什么意思?...
vue33 —— 搭建本地服务器
weixin_43899694的博客
11-24 461
webpack提供一个可选的本地开发服务器 该本地服务器基于nodejs搭建，内部使用express框架 可实现让浏览器自动刷新显示修改后的结果。不用每次都npm run build 把文件先放到内存中，浏览器从内存中直接读取。最后发布才把文件放到硬盘 安装配置： npm install webpack-dev-server@2.9.1 --save-dev module.exports ...
vue-webpack搭建本地服务器
weixin_43862280的博客
03-04 228
vue搭建本地服务器 1.安装webpack-dev-server npm install webpack-dev-server@版本号 2.配置webpack.json.js module.exports = { ... devServer:{ contentBase: './dist', inline: true, port: ...
vue学习 自建服务器 node
weixin_30443731的博客
07-01 237
1、什么是node 1.1 用C++语言编写，用来运行JavaScript语言 1.2 node可以为前端项目提供server (包含了socket) 　　 2、npm:包管理器 - 为node拓展功能的 在官网下载安装后 换国内源，加速下载 管理员命令行：npm install -g cnpm --registry=https://registry.npm...
一、vue3+node.js小练习之使用node.js搭建本地服务器
最新发布
Jackeyloveadzz的博客
09-15 387
使用node搭建服务器，链接mysql服务器，并使用vue3新建项目，带你从第一行开始！
vue环境搭建
码农的专栏
09-30 611
Vue.js Vue.js是目前很火的一个前端框架，采用MVVM模式设计，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用，特别适合单页应用的开发。 Vue.js是数据驱动的，它通过一些特殊的语法，将DOM和数据绑定起来，无需手动操作DOM。一旦创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM......
vue构建的日记应用来源于君名
08-12
在构建这个日记应用的过程中，开发者可能使用了Vue CLI，这是一个官方提供的命令行工具，用于快速搭建项目结构和初始化项目。通过Vue CLI，可以方便地集成Webpack等构建工具，实现模块化开发和优化。 应用中的主要...
服务器搭建日记（十）：Node+MySQL+Nginx网站案例说明
jimson_zhu的博客
07-29 721
一个Node案例说明。
服务器搭建日记（五）：部署Node.js环境
jimson_zhu的博客
07-23 627
部署Node.js环境。
vue学习路线1——搭建本地项目
蜗牛的博客
03-26 605
一. 安装nodejs 链接：https://nodejs.org/zh-cn/ 二. 安装webpack 安装命令：cnpm install webpack -g 安装完成，通过webpack -v来查看当前webpack版本 三. 接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架 安装命令：npm install -g vue-cli
Vue项目打包部署总结配合nginx部署
weixin_52901235的博客
03-10 2977
启动后，正常情况下，直接访问http://服务器ip 或 http://域名 （本文测试用的服务器没有配置域名，所以用ip，就本文而言，域名和ip没有太大区别）应该就能看到nginx服务器的默认页面了——如果访问不到，有可能是你的云服务器默认的http服务端口（80端口）没有对外开放，在服务器安全组配置一下即可。之前的步骤已经介绍了怎样配置nginx指向我们创建的文件夹，剩下的问题就是怎么把打包好的文件同步到服务器上指定的文件夹里，比如同步到之前步骤中创建的/www。H5新增了history的。
Vue项目的部署(服务器)
抗争小青年的博客
09-24 4073
Vue项目的部署(服务器) 前几天帮朋友写了一个可以动态查看地点温度的前端项目。目前已经部署上线了，访问链接点这里。 效果图： 图一： 图二： 当然，温度也都是实时跟新的,而且根据气温高低，排出气温t
Vue 教程(三十七)搭建本地服务器
yuan_xw的专栏
08-10 1409
Vue 教程(三十七)搭建本地服务器 搭建本地服务器 webpack 提供了一个可选的本地开发服务器,这个本地服务器基于 node.js 搭建,内部使用 express 框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。 不过它是一个单独的模块,在 webpack 中使用之前需要先安装它。 安装模块 npm install --save-dev webpack-dev-server@2.9.3 修改 webpack.config.js 文件 // 导入Node中path常量
Vue初学32-搭建本地服务器
gis_zhouda的博客
06-05 530
在项目开发测试的时候，每次修改了代码都要执行命令npm run build重新打包，非常繁琐。通过搭建本地服务器，测试的时候能够实时刷新，测试完成后，只在发布的时候打包一次，避免了每次修改都要重新打包。
熟悉了后端，最近在想vue是如何部署到服务器上去
热门推荐
晴天Smile
11-17 1万+
我感觉下面说得挺对的： 还守护进程,用守护进程也应该你自己用nodejs实现一个web静态服务器而不是去守护npm run dev 楼主问的既然是布署，哪默认就应该是生产环境下的布署，vue开发的应用本质上就是静态文件,无论你用何种web服务器，放上去就应该能通过http访问 为什么现在好多人连这个都搞不定了呢？ 原因在于现在太多的前端工具帮我们做了太多，而我们只学会了打命令，
vue 搭建本地JSON静态数据服务器
Betrayer_hobby的博客
01-04 1887
在日常开发中,可能由于后端任务较重,接口不能及时提供给前端,领导要求先展示页面的要求下,这个时候就需要假数据,如果自己data里面定义假数据或html中直接写死,如果页面多了,后面接口提供的时候,修改会很麻烦. 此文提供一种本地本地json serve方案,除上述问题,此方案更加可以方便和后端协商所需数据字段格式. 一.仅供本地测试用 ,无法部署在服务器上取数据 1.安装全局的json-server工具包 npm install -g json-server 2.在项目更目录(src同级)下创建moc
vuejs怎么在服务器部署？（知乎）
weixin_34125592的博客
07-28 1073
作者：知乎用户链接：https://www.zhihu.com/question/46630687/answer/157166318来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 感觉好多人把最基本的都忘了 还npm run dev 还守护进程,用守护进程也应该你自己用nodejs实现一个web静态服务器而不是去守护npm run dev 楼主问的既然是...
vue项目打包在本地打开（开启一个本地服务器）
weixin_38289645的博客
11-28 7072
今天是打包的时候看到这个提示： Tip: built files are meant to be served over an HTTP server.   Opening index.html over file:// won't work. 然后学到到node.js里面的http-server开启本地服务，从本地文件夹中直接打开的一般都是file协议，当代码中存在http或https的链接...
Vue3.0初体验：项目搭建与核心特性
"Vue3.0的初体验和项目搭建教程" Vue3.0作为Vue.js框架的最新版本，带来了显著的改进和优化，提升了整体性能，并引入了一系列新特性。以下是对这些变化的详细说明： 1. **性能提升 (Performance)**: Vue3.0在性能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jimson_zhu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值