[转]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 模块的 安装 和 卸载 : ...
随机推荐
- Nginx区分内部与外部
目录 一.简介 二.配置 一.简介 场景: 当网站需要维护时,访问任何连接都显示维护页面 原理: 将任何访问都重定向到维护页面. 二.配置 server { listen 80; index inde ...
- 车载以太网第二弹|测试之实锤 -DoIP测试开发实践
前言 车载以太网测试之实锤系列,之前我们已经从环境设备组成.被测对象组成再到测试过程和测试结果分析,分享了完整的PMA测试 .IOP测试 .TC8中的TCP/IP协议一致性测试 .也分享了1000BA ...
- [BUUCTF]REVERSE——不一样的flag
不一样的flag 附件 步骤 例行查壳儿,32位程序,无壳儿 32位ida载入,shift+f12检索程序里的字符串,看到了如图标记的字符串,加上下面又上下左右的选项,估计是道迷宫类型的题目 将迷宫字 ...
- 在eclipse打开jsp文件变成文本的解决:
在eclipse打开jsp文件变成文本的解决: ------原因:可能是不小心删除某些组件等等一些操作 1,考虑一下是否还有插件jsp 编辑器组件 选择内部编辑器[在下面选择 JSP Editor]- ...
- java 多线程 线程池:多核CPU利用ExecutorService newWorkStealingPool; ForkJoinPool线程池 执行可拆分的任务RecursiveAction;RecursiveTask
1,给定并行级别: 1,ExecutorService newWorkStealingPool(int parallelism): 创建持有足够的线程的线程池来支持给定的并行级别,该方法还会使用多个队 ...
- java 多线程: Thread 并发访问-代码块同步synchronized {};String作为被锁的对象
方法同步的弊端 方法同步的时候,如果一个方法需要线程安全控制的代码速度其实很快,但是还有其他的业务逻辑代码耗时非常长(比如网络请求),这样所有的线程就在这一块就等待着了,这样造成了极大的资源浪费如果并 ...
- signal 信号
python学习笔记--信号模块signal 阅读目录(Content) 1 signal基本信号名 2 常用信号处理函数 2.1 设置发送SIGALRM信号的定时器 2.2 设置信号处理函数 3 常 ...
- MySQLs数据库建外键时自动跑到缩影处,真奇怪
MySQLs数据库建外键时自动跑到缩影处,真奇怪MyISAM引擎不支持外键:InnoDB存储引擎支持外键.如何解决的,把表修改成innodb类型吧用的工具是SQLyog Ultimate如图所示:
- c++ 设计模式概述之享元
类写的不够规范,目的是为了缩短篇幅,实际中其不要这样做. 参考文章: 1. http://c.biancheng.net/view/1371.html 1.概述 A.享元,我的理解是: 共享的模块单元 ...
- 【LeetCode】544. Output Contest Matches 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 日期 题目地址:https://leetcode ...