亲测,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 , 就可以看到效果了

webpack打包vue项目之后生成的dist文件该怎么启动运行的更多相关文章

  1. vue 项目之后生成的 dist 文件该怎么在本地启动运行

    简单高效 npm i -g servecd distserve

  2. 如何做到在webpack打包vue项目后,在外部动态修改配置文件

    在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...

  3. 16.如何做到webpack打包vue项目后,可以修改配置文件

    问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...

  4. webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  5. 解决webpack打包vue项目后,部署完成后,刷新页面页面404

    1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷 ...

  6. webpack打包vue项目之后怎么启动&注意事项

    参考路径:https://blog.csdn.net/cn_yaojin/article/details/80164477 参考路径:https://www.imooc.com/article/323 ...

  7. vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)

    1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...

  8. Cordova打包vue项目生成Apk (解决cordova build android抛出的zip问题)

    最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...

  9. 教你用Cordova打包Vue项目

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...

随机推荐

  1. css实现图片垂直居中

    1.行高 == 高度:已知图片的高宽 <div style="text-align: center; width: 500px;height:200px; line-height:20 ...

  2. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类: HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  3. 阿里云负载不支持 WebSocket 协议与 WSS 和 Nginx 配置问题

    WebSocket 是 HTML5 下一种新的协议.它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯的目的.它与HTTP一样通过已建立的TCP连接来传输数据,但是它和HTT ...

  4. OpenShift Redhat 搭建NodeJS环境

    https://openshift.redhat.com/ OpenShift 是 redhat 公司推出的一个 PaaS 云计算应用平台,开发者可在上面构建.测试.部署和运行应用程序,它支持 Jav ...

  5. 全网最详细的Windows系统里PLSQL Developer 64bit的下载与安装过程(图文详解)

    不多说,直接上干货! ORACLE是数据库,有客户端和服务器: 其,具体下载,可见http://www.oracle.com/technetwork/database/enterprise-editi ...

  6. Method 'initializationerror' not found.Opening the test classs JUnit4单元测试报错问题解决办法(图文详解)

    不多说,直接上干货! 问题现象 今天使用JUnit 4进行单元测试时,测试程序一直运行不起来,报method initializationerror not found错误,如下: 问题分析 网上说版 ...

  7. 如果非得了解下git系统... - 实践篇

    git的定义是一个内容寻址文件系统.内容.寻址.文件.系统,该来的总会来的… 本文旨在通过实践来介绍.git文件夹中的目录及文件功能,属git基础知识.但在此基础上可解决各git使用过程中可能遇到的问 ...

  8. ubuntu 下配置elasticSearch

    配置JAVA环境 配置jdk 上官网下载x64的和ubuntu匹配的jdk 找到usr/java ,解压下载的文件  tar –xzvf  文件.tar.gz Vim /etc/source  添加配 ...

  9. php获取 POST请求的数据

    普通键值对的数据: $_POST[‘username’]; // 获取 username的信息: $_REQUEST; //则会获取 整个请求中的键值对,返回结果为数组: 如果是,流数据,则需要使用: ...

  10. php的explode()和implode()方法

    php 中,字符串与数组互转       拆分字符串 到数组 explode()    - -(其他语言中的 split) 将数组连接成字符串 implode() <?php $test = ' ...