[转]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 模块的 安装 和 卸载 : ...
随机推荐
- 【dva】dva的基本用法
services 该文件夹用于存储services,里面的内容为接口调用函数,记得将数据返回.(request是我自己封装函数,也可以用axios原生的函数) const finishTask = { ...
- thinkPHP跨数据库访问/数据库切换
在项目的开发中会遇到访问多个数据库的问题这里讲的是:访问同一地址下的多个数据库 第一步:在配置文件中配置你要连接的其他的数据库 例如:我现在默认的数据库是back 现在我要设置第二个数据库travel ...
- HDD深圳站:全生命周期赋能开发者,华为引领应用生态升级
12月14日,由华为开发者联盟主办的HDD(HUAWEI Developer Day)于深圳举行.此次HDD主论坛,围绕打造应用全生命周期服务,介绍了华为在创新孵化.开发测试.应用分发和运营增长阶段的 ...
- C# ASP.NET MVC/WebApi 或者 ASP.NET CORE 最简单高效的跨域设置
概述 前面写了一篇:<C# ASP.NET WebApi 跨域设置>的文章,主要针对 ASP.NET WebApi 项目. 今天遇到 ASP.NET MVC 项目也需要设置跨域,否则浏览器 ...
- WebApi的前端调用
WebApi前端调用 HTML代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" ...
- java 图形化小工具Abstract Window Toolit 常用组件
基本组件 Button: 按钮,可接受单击操作 Canvas: 用于绘图的画布 Checkbox: 复选框组(也可变成单选框组件) CheckboxGroup: 用于将多个checkbox组件组合成一 ...
- 第二周Python笔记 数据类型 列表 字典
列表,拉锁式儿合并. [ [a,b] for a,b in zip(list1,list2)] #最笨的 a=[1,2,3,4,5] b=[2,3,4,5,6] d=[] for i in range ...
- Windows 数据盘自动分区脚本
在CMD命令文本下执行,即可: diskpart //1.进入diskpart模式 list disk //2.查询磁盘 select disk 1 //3.选择磁盘 create partition ...
- 微信支付——沙箱调试环境getsignkey方法秘钥获取及常见问题说明
官方文档 :https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=23_1 微信支付PC二维码支付:https://www.cnblogs ...
- RPA培训:RPA的核心三个组件常见部署方式(RPA学习天地)
整体架构 目前主流厂商的RPA平台就是由控制台.设计器和机器人这三个标准套件组成,这三个核心套件形成了RPA产品的基本要素.其它如AI平台.人机交互.流程挖掘.自动化中心等都是衍生出来的周边产品. 1 ...