我们知道使用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. 9.1、Libgdx的输入处理的配置和查询

    (官网:www.libgdx.cn) 有时判断是否支持输入设备是必要的.通常你的游戏不需要支持所有的输入设备.比如你可能不需要加速度计或者罗盘.这时我们需要禁用这些设备保持电量.接下来将教你怎样做. ...

  2. mysql进阶(二十三)数据库事务四大特性

    数据库事务四大特性       原子性.一致性.分离性.持久性 原子性  事务的原子性指的是,事务中包含的程序作为数据库的逻辑工作单位,它所做的对数据修改操作要么全部执行,要么完全不执行.这种特性称为 ...

  3. Leetcode_101_Symmetric Tree

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42087039 Given a binary tree, c ...

  4. Java集合之Collection

    Java集合是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等.Java集合工具包位置是java.util.* Java集合主要可以划分为4个部分:List列表.Set集 ...

  5. Java关键字之static

    static 表示"全局"或者"静态"的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念. 被stati ...

  6. 《java入门第一季》之Arrays类前传(排序问题)

    一:冒泡排序 /* * 数组排序之冒泡排序: * 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处 * * 引申: * 利用冒泡排序法,可以获取一个数组的最大值(先冒泡排序,取最后一 ...

  7. 【Qt编程】Qt学习之状态栏

    QStatusBar类提供一个水平条来显示状态信息.所谓状态信息,拿个简单的例子来说,当你在word中编辑时,左下角就会出现页面.字数等等信息.状态信息可以分为三类:临时信息,如一般的提示信息:正常信 ...

  8. OpenCV轮廓检测,计算物体旋转角度

    效果还是有点问题的,希望大家共同探讨一下 // FindRotation-angle.cpp : 定义控制台应用程序的入口点. // // findContours.cpp : 定义控制台应用程序的入 ...

  9. Android ORM 框架之 greenDAO

    前言 我相信,在平时的开发过程中,大家一定会或多或少地接触到 SQLite.然而在使用它时,我们往往需要做许多额外的工作,像编写 SQL 语句与解析查询结果等.所以,适用于 Android 的ORM  ...

  10. Android Data Binding实战(一)

    在今年Google I/O大会上,Google推出Design Library库的同时也推出了Android Data Binding,那么什么是Data Binding?其名曰数据绑定,使用它我们可 ...