亲测,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配置本地服务器的更多相关文章

  1. webpack构建本地服务器

    webpack构建本地服务器 想不想让你的浏览器监测你的代码的修改,并自动刷新修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建, 可以实现你想要的这些 ...

  2. webpack 配置devServer 服务器

    webpack 配置devServer 服务器 /** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 */ // 用来拼接绝对路径的方法 c ...

  3. 使用webpack构建本地服务器

    想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件 ...

  4. webpack开启本地服务器与热更新

    第一个webpack本地服务 webpack本地服务相关的一些操作指令与应用 一.第一个webpack本地服务 //工作区间 src//文件夹 index.js//入口文件 index.css//测试 ...

  5. PHPStorm 配置本地服务器

    本篇教程为配置 PHPStorm 本地服务器,以方便程序调试. 本地服务器工具:XAMPP for windows 7.1.1-0 / Apache 2.4.25 ( Win32 ) / PHP 7. ...

  6. 如何快速搭建&配置本地服务器-前端技能

    废话不多说,上图: 首先登录http://www.phpstudy.net/download.html 下载安装phpstudy,特别简单不详解: 创建一个本机项目并且与本机域名进行绑定主要分为两步; ...

  7. webpack配置这一篇就够

    最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...

  8. webpack 配置react脚手架(六):api

    1 访问网址 https://cnodejs.org/api 可以调取api 2.//该body-parser 可以将请求的body数据,转变成 json 格式数据://express-session ...

  9. webpack配置教程

    1.npm脚本运行webpack与命令行输入webpack的区别  : https://segmentfault.com/a/1190000011052193   npm 模块的 安装 和 卸载  : ...

随机推荐

  1. Apache Log4j 远程代码执行漏洞源码级分析

    漏洞的前因后果 漏洞描述 漏洞评级 影响版本 安全建议 本地复现漏洞 本地打印 JVM 基础信息 本地获取服务器的打印信息 log4j 漏洞源码分析 扩展:JNDI 危害是什么? GitHub 项目 ...

  2. [OpenGL ES 02]OpenGL ES渲染管线与着色器

    [OpenGL ES 02]OpenGL ES渲染管线与着色器 罗朝辉 (http://www.cnblogs.com/kesalin/) 本文遵循"署名-非商业用途-保持一致"创 ...

  3. 用 shell 脚本做自动化测试

    前言 项目中有一个功能,需要监控本地文件系统的变更,例如文件的增.删.改名.文件数据变动等等.之前只在 windows 上有实现,采用的是 iocp + ReadDirectoryChanges 方案 ...

  4. LuoguP7019 [NWRRC2017]Auxiliary Project 题解

    Update \(\texttt{2021.6.24}\) 修改了一处格式上的错误和一处笔误. Content 已知用 LED 灯来显示 \(0\sim9\) 这十个数字分别需要 \(6,2,5,5, ...

  5. CentOS7.6 鲜为人知的/etc/resolv.conf 之 /etc/resolv.conf.save (保持/etc/resolv.conf不被修改:/etc/dhcp/dhclient-enter-hooks 无效之/etc/resolv.conf被清空的特殊案例)

    目的: 用户可以自定义/etc/resolv.conf内容,且不被系统修改. 常规方法1: /etc/sysconfig/network-scripts/ifcfg-eth0 网卡配置文件中增加PEE ...

  6. 网络编程socket 结合IO多路复用select; epool机制分别实现单线程并发TCP服务器

    select版-TCP服务器 1. select 原理 在多路复用的模型中,比较常用的有select模型和epoll模型.这两个都是系统接口,由操作系统提供.当然,Python的select模块进行了 ...

  7. ss命令用来显示处于活动状态的套接字信息。

    ss命令用来显示处于活动状态的套接字信息.ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.但ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信息,而且比net ...

  8. Java高级:条件队列与同步器Synchronizer的原理+AQS的应用

    14.构建自定义的同步工具 类库中包含了许多存在状态依赖性的类,例如FutureTask,Semaphore和BlockingQueue等.在这些类中的一些操作中有着基于状态的前提条件,例如,不能从一 ...

  9. 再谈多线程模型之生产者消费者(单一生产者和多消费者 )(c++11实现)

    0.关于 为缩短篇幅,本系列记录如下: 再谈多线程模型之生产者消费者(基础概念)(c++11实现) 再谈多线程模型之生产者消费者(单一生产者和单一消费者)(c++11实现) 再谈多线程模型之生产者消费 ...

  10. 【九度OJ】题目1137:浮点数加法 解题报告

    [九度OJ]题目1137:浮点数加法 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1137 题目描述: 求2个浮点数相加的 ...