亲测,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. Redis哨兵 部署和配置

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

  2. 项目集成seata和mybatis-plus冲突问题解决方案:(分页插件失效, 自动填充失效, 自己注入的id生成器失效 找不到mapper文件解决方案)

    项目集成seata和mybatis-plus,seata与mybatis-plus冲突问题(所有插件失效,自动填充失效,找不到mapper文件解决方案) 自动填充代码: package com.fro ...

  3. linux小应用 —— 日志过滤

    先说问题,统计一个日志文件中去重之后的ip地址的个数.其实这是一个非常常见也比较简单的问题,其中我个人认为最主要的应该是匹配ip地址是这个问题的核心.剩下的就是对linux命令的熟练程度的问题了.首先 ...

  4. java nio 写一个完整的http服务器 支持文件上传 chunk传输 gzip 压缩 使用过程 和servlet差不多

    java nio 写一个完整的http服务器  支持文件上传   chunk传输    gzip 压缩      也仿照着 netty处理了NIO的空轮询BUG        本项目并不复杂 代码不多 ...

  5. AT1445 乱数生成 题解

    Description 有一个机器会等概率从 \(1\) 到 \(n\) 的正整数中选出一个整数.显然地,这个机器运行 \(3\) 次后会得到 \(3\) 个整数.求这 \(3\) 个整数的中位数是 ...

  6. LuoguP7041 [NWRRC2016]King's Heir 题解

    Content 给出现在的日期,请从 \(n\) 个人当中选出一个人,使得他是所有成年人(\(\geqslant 18\) 岁的人)中年龄最小的. 数据范围:设日期为 \(yy/mm/dd\),则有 ...

  7. JAVA简单整合protoc文件

    引入maven <dependency> <groupId>com.google.protobuf</groupId> <artifactId>prot ...

  8. JAVA删除某个文件夹(递归删除文件夹的所有文件)

    /** * 递归删除文件夹下所有内容 最后删除该文件夹 * @param filePath 要删除的文件夹路径 * @return */ public boolean deleteFiles(Stri ...

  9. c++读取文件操作和写入文件

    在C++中与读取文件和写入文件简单操作有关的类分别有ifstream(文件读入).ofstream(文件写出).fstream (文件读入和写出). 名称 作用 ifstream 文件读入 ofstr ...

  10. c++11多线程常用代码总结

    关于 好记性不如烂笔头 理解虽然到位,但是时间长了就容易忘. 本文仅总结自己经常忘记的知识点,非 详细解释多线程某些原理.概念. 抱着复习的态度总结此文. 本文参考: cppreference 欢迎指 ...