我们知道使用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. [WinForm]最小化到系统托盘,右键退出

    1.拉出一个notifyIcon1到用户界面,也可以NEW一个 2.拉出一个ContextMenuStrip控件,命名为mymenu,集合中增加退出 3.notifyIcon1的属性ContextMe ...

  2. 【翻译】对于Ext JS 5,你准备好了吗?

    原文:Are You Ready for Ext JS 5? Ext JS 5:准备升级 对于Ext JS 5加入Sencha的大家庭,我们感到非常高兴!作为一个主要版本,在Ext JS 5引入了一堆 ...

  3. python标准库:collections和heapq模块

    http://blog.csdn.net/pipisorry/article/details/46947833 python额外的数据类型.collections模块和heapq模块的主要内容. 集合 ...

  4. Java集合之Hashtable

    和HashMap一样,Hashtable也是一个散列表,存储的内容也是键值对key-value映射.它继承了Dictionary,并实现了Map.Cloneable.io.Serializable接口 ...

  5. Android调试工具之ADB

    Android调试工具之ADB 1.     什么是ADB adb的全称为Android Debug Bridge,顾名思义,这个是PC机与Android设备的连接桥.简单的说,就是通过adb ,PC ...

  6. C++中const的实现机制深入分析

    via:http://www.jb51.net/article/32336.htm C语言以及C++语言中的const究竟表示什么?其具体的实现机制又是如何实现的呢?本文将对这两个问题进行一些分析,需 ...

  7. mysql导入导出.sql数据

    导入sql的命令:source "路径名"+/mytest_emp_dept.sql 常用source 命令 进入mysql数据库控制台, 如mysql -u root -p my ...

  8. Leetcode_198_House Robber

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/47680663 You are a professional ...

  9. Gradle 1.12用户指南翻译——第三十七章. OSGi 插件

    本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  10. DB Query Analyzer 6.02 is released, 71 articles concerned have been published

    DB Query Analyzer is presented by Master Genfeng, Ma from Chinese Mainland. It has English version n ...