亲测,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. 在写易买网时产生的错误 JSTL标签库中<c:choose></c:choose>不能放JSP页面<!-- -->注释

    最近在使用JSTL标签库的<c:choose>标签时候,发现在该标签体中加了JSP的<!-- -->注释时,总是会显示报错信息.错误的信息如下: org.apache.jasp ...

  2. Redis哨兵 部署和配置

    目录 一.哨兵简介 哨兵介绍 哨兵原理 二.哨兵部署 环境介绍 哨兵配置 三.使用验证 一.哨兵简介 哨兵介绍 Sentinel(哨兵)是用于监控redis集群中Master状态的工具,其已经被集成在 ...

  3. mobile app 与server通信的四种方式

    Have you ever wondered how the information gets into the application installed in your mobile device ...

  4. [BUUCTF]REVERSE——[ACTF新生赛2020]Oruga

    [ACTF新生赛2020]Oruga 附件 步骤: 例行检查,64位程序,无壳 64位ida载入,检索字符串,根据提示来到关键函数 14行~18行就是让字符串的前5位是 actf{ ,sub_78A( ...

  5. WebRTC + WebSocket 实现视频通话

    前言 WebRTC WebRTC(Web Real-Time Communication).Real-Time Communication,实时通讯. WebRTC能让web应用和站点之间选择性地分享 ...

  6. HTTP状态码一览表

    常见Http状态码大全 2018年03月16日 11:36:31 阅读数:153 一些常见的状态码为: 200 - 服务器成功返回网页404 - 请求的网页不存在503 - 服务不可用详细分解: 1x ...

  7. 在执行java代码时,设置了断点,然后莫名的没执行完方法内的代码就结束了,此刻一般在出错处代码用try,catch包括起来

    在执行java代码时,设置了断点,然后莫名的没执行完方法内的代码就结束了,此刻一般在出错处代码用try,catch包括起来就能看到是什么异常了,记住try,catch语句的作用

  8. More Effective C++ 基础议题(条款1-4)总结

    More Effective C++ 基础议题(条款1-4)总结 条款1:仔细区别pointers和references 如果有一个变量,其目的是用来指向(代表)另一个对象,但是也有可能它不指向(代表 ...

  9. lightgallery 使用

    用途 图片预览,支持多图片滑动预览 git 地址 https://github.com/sachinchoolur/lightgallery.js 代码 # idnex.html <script ...

  10. 【LeetCode】831. Masking Personal Information 解题报告(Python)

    [LeetCode]831. Masking Personal Information 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzh ...