我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢?

  倘若直接打开html文件,会报如下错误:

    

  那么该如何运行呢?其实可以将生成的dist文件部署到 express 服务器上运行。

  (1)、安装express-generator生成器。

     npm install express-generator -g // 也可使用cnpm比较快

  

  (2)、创建一个express项目。

     express expressName // expressName是项目名

  (3)、进入项目目录,安装相关项目依赖。

     cd expressName

     npm install // 或cnpm install

  (4)、此时生成的项目目录应该是这样的:

      

  (5)、将dist文件夹下的所有文件复制到express项目的publick文件夹下面,然后运行  npm start 来启动express项目。

  (6)、打开浏览器,输入localhost:3000就可以看到效果了。例如我的是这样的: 

使用webpack打包后的vue项目如何运行(express)的更多相关文章

  1. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

  2. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  3. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  4. 为何webpack打包后的文件要放在服务器上才能运行

    为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览 ...

  5. 性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

    查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看 ...

  6. idea中导入别人的vue项目并运行

    1. 下载node.js 在搭建vue的开发环境之前,先下载node.js,下载地址:https://nodejs.org/en/ https://blog.csdn.net/antma/articl ...

  7. 第六十九篇:vue项目的运行过程

    好家伙, 1.vue的目录结构分析 来看看项目的目录 (粗略的大概的解释) 2.vue项目的运行流程 在工程化项目中,vue要做的事情很单纯:通过main.js把App.vue渲染到index.htm ...

  8. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  9. Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

随机推荐

  1. MyEclipse 报错:Errors running builder 'DeploymentBuilder' on project '工程名'

    并没有更换MyEclipse版本,只是重新卸载了下,然后就报错误,参考了网上的文章 解决版本 .就是删除工程下部署文件

  2. Mahout LDA 聚类

    Mahout LDA 聚类 一.LDA简介   (一)主题模型 在主题模型中,主题表示一个概念.一个方面,表现为一系列相关的单词,是这些单词的条件概率.形象来说,主题就是一个桶,里面装了出现概率较高的 ...

  3. hadoop学习视频

    杨尚川的视频 http://www.tudou.com/plcover/EvJCo2zl9hQ/ 酷6视频 http://v.ku6.com/show/8PkgqGcarHKndyP3rl_pUw.. ...

  4. 利用JQuery直接调用asp.net后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...

  5. 增量会话对象——DeltaSession

    在集群环境中为了使集群中各个节点的会话状态都同步,同步操作是集群重点解决的问题,一般来说有两种同步策略,其一是每次同步都把整个会话对象传给集群中其他节点,其他节点更新整个会话对象:其二是对会话中增量修 ...

  6. "C#":MySql批量数量导入

    现在对数据库(以MySql为例)的操作大多会封装成一个类,如下例所示: namespace TESTDATABASE { public enum DBStatusCode { ALL_OK, MySq ...

  7. 【Java编程】Java在dos窗口编译与执行的批处理

    最近在Java编程过程中,常用到dos窗口对程序进行编译与运行.但是不方便之处在于每次都要输入命令进入将要编译的程序的目录(其实也有简单的方法,在文章末尾给出).于是编写了一个配置文件,可以一次修改, ...

  8. 【LaTeX排版】LaTeX论文排版<四>

    1.表格的插入     一般的表格插入的代码如下: \begin{table}[H] \centering \begin{tabular}{|c|c|c|} \hline 感知方法&优点&am ...

  9. hbase mlockall

    mlockall 头文件:#include <sys/mman.h> 函数原型:int mlockall(int flags); flags:       MCL_CURRENT --Lo ...

  10. 面试之路(29)-TCP流量控制和拥塞控制-滑动窗口协议详解

    拥塞: 拥塞发生的主要原因在于网络能够提供的资源不足以满足用户的需求,这些资源包括缓存空间.链路带宽容量和中间节点的处理能力.由于互联网的设计机制导致其缺乏"接纳控制"能力,因此在 ...