我们知道使用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. HashMap与HashTable面试宝典

    u012233832的专栏 初生牛犊 目录视图 摘要视图 订阅 写博客,送money.送书.送C币啦   7-8月博乐推荐文章    砸BUG 得大奖 100%中奖率   微信开发学习路线高级篇上线  ...

  2. 【翻译】Ext JS最新技巧——2014-9-10

    原文:Top Support Tips Greg Barry:删除网格单元格的焦点 在Ext JS 5.0.1,添加了一些与可访问性和支持ARIA有关的显著改进.虽然鼓励使用这些新增功能,但默认样式可 ...

  3. shell脚本格式的几点注意:格式严格,空格不能随便出现(一写就记不住)

    shell脚本中,不能随意添加空格,否则出错: 1,=等号两边必须无空格.否则出错.如i =$1和i= $1都是错的.但是在()内部不限制如for ((i= 1;i < 3;i= i+1))是正 ...

  4. leetcode【67】-Bulb Switcher

    题目描述: There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off ...

  5. com.android.dex.DexException: Multiple dex files define(jar包重复引用) 错误解决

    前段时间开始转入Android studio,不料果真使用时候遇到些错误,在此记下! 出现这个错误往往是在libs目录下有个jar包,然后在gradle文件中又引用了,即: 共同引用了. 解决方法: ...

  6. LDA实现

    topic model本质上就一个套路,在doc-word user-url user-doc等关系中增加topic层,扩充为2层结构,一方面可以降维,另一方面挖掘深层次的关系,用户doc word ...

  7. windows linux—unix 跨平台通信集成控制系统----系统硬件信息获取

    控制集成系统需要了解系统的各项硬件信息,之前我们设计的时候,习惯使用c函数来搞,后来可能发现程序的移植性收到了一些影响,比如unix内核的一些c函数在linux下面是没有的: 比如 苹果达尔文内核的如 ...

  8. Java进阶(十六)使用new Date()和System.currentTimeMillis()获取当前时间戳

    java使用new Date()和System.currentTimeMillis()获取当前时间戳 在开发过程中,通常很多人都习惯使用new Date()来获取当前时间,使用起来也比较方便,同时还可 ...

  9. android微信登录,分享

    这几天开发要用到微信授权的功能,所以就研究了一下.可是微信开放平台接入指南里有几个地方写的不清不楚.在此总结一下,以便需要的人. 很多微信公众平台的应用如果移植到app上的话就需要微信授权登陆了. 目 ...

  10. Java I/O最简单的几个类

    今天把I/O中最简单的几个类整理了一下,之所以整理最简单的,是因为这样会让我更加快速方便的理顺这里面的东西,以前每一次用的时候都要先百度一下,觉得很烦. 首先需要先看一下Read,Write和Stre ...