[转]webpack配置本地服务器
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。
我的vue项目结构如下:
1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置)
执行成功如下图所示:
然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件。
此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到。
2. 安装express-generator生成器
执行 $ npm install express-generator -g 进行安装
3. 创建一个express项目
执行 $ express expressDemo (expressDemo是项目名)
expressDemo项目目录如下图:
4. 进入expressDemo目录,安装项目依赖
$ cd expressDemo
$ npm install
5. 把dist目录下的所有文件复制到express项目的public文件夹下
然后运行 $ npm start 启动expressDemo
打开浏览器,输入 http://localhost:3000 , 就可以看到效果了
原文链接:https://blog.csdn.net/u014054437/article/details/79981307
[转]webpack配置本地服务器的更多相关文章
- webpack构建本地服务器
webpack构建本地服务器 想不想让你的浏览器监测你的代码的修改,并自动刷新修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建, 可以实现你想要的这些 ...
- webpack 配置devServer 服务器
webpack 配置devServer 服务器 /** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 */ // 用来拼接绝对路径的方法 c ...
- 使用webpack构建本地服务器
想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件 ...
- webpack开启本地服务器与热更新
第一个webpack本地服务 webpack本地服务相关的一些操作指令与应用 一.第一个webpack本地服务 //工作区间 src//文件夹 index.js//入口文件 index.css//测试 ...
- PHPStorm 配置本地服务器
本篇教程为配置 PHPStorm 本地服务器,以方便程序调试. 本地服务器工具:XAMPP for windows 7.1.1-0 / Apache 2.4.25 ( Win32 ) / PHP 7. ...
- 如何快速搭建&配置本地服务器-前端技能
废话不多说,上图: 首先登录http://www.phpstudy.net/download.html 下载安装phpstudy,特别简单不详解: 创建一个本机项目并且与本机域名进行绑定主要分为两步; ...
- webpack配置这一篇就够
最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...
- webpack 配置react脚手架(六):api
1 访问网址 https://cnodejs.org/api 可以调取api 2.//该body-parser 可以将请求的body数据,转变成 json 格式数据://express-session ...
- webpack配置教程
1.npm脚本运行webpack与命令行输入webpack的区别 : https://segmentfault.com/a/1190000011052193 npm 模块的 安装 和 卸载 : ...
随机推荐
- uWSGI和WSGI之间的关系
一.WSGI 协议 WSGI:是一种协议规范,起到规范参数的作用,就像告诉公路一样,规定超车靠右行,速度不低于90km/h,等.但这一切都是对双方进行沟通,比如,重庆到武汉这条高速路,这儿重庆和武汉就 ...
- mysqlslap基准测试
目录 简介 二.例子 三.其它选项 简介 mysqlslap是mysql自带的基准测试工具 优点:查询数据,语法简单,灵活容易使用.该工具可以模拟多个客户端同时并发的向服务器发出查询更新,给出了性能测 ...
- jenkins集成openldap
参考图片 集成ldap参考链接:https://www.cnblogs.com/mascot1/p/10498513.html
- Python pyecharts绘制饼图
一.pyecharts绘制饼图语法简介 饼图主要用于表现不同类目的数据在总和中的占比.每个的弧度不是数据量的占比pie.add()方法的用法add(name, attr, value, radius= ...
- 如何实现 range 函数的参数?
关于 range 函数 Python内置的range函数可以接收三个参数: class range(stop): ... class range(start, stop[, step]): ... 标 ...
- 移动应用开发:Flutter
目录 前言 Flutter 介绍 移动应用开发:选择对比 原生开发 H5 技术 React Native Flutter 总结 参考 前言 "镜子镜子 告诉我,世界上最好的语言是什么&quo ...
- 好奇怪啊,如果邮箱JSON格式的字符串不是在一行上,那么转为JSON将转换不成功,估计是数据格式有问题吧
好奇怪啊,如果邮箱JSON格式的字符串不是在一行上,那么转为JSON将转换不成功,估计是数据格式有问题吧, 打印出的数据必须是如下的在一行的字符串,才可以转换为JSON格式成功.
- 当页面是本地页面时,通过ajax访问tomcat里的action,传递的参数在action里并不能识别
当页面是本地页面时,通过ajax访问tomcat里的action,传递的参数在action里并不能识别,这个问题困扰了我不少时间. 在测试时发现此问题
- 通过css实现表格的斜线
效果图 实现思路 编辑一个svg文件,可以自定义线条颜色和粗细. 将svg文件转为base64格式,作为背景图属性设置. svg转base64的网址:https://www.sojson.com/im ...
- 十行代码搭建基于.NET6三维应用程序
本文介绍在.NET6环境下如何集成Rapid SDK三维控件,请首先确保已经安装了Vistual Studio 2022,社区版就够用了. 1 创建项目 选择创建Windows窗体应用 给程序起一个酷 ...