使用webpack打包后的vue项目如何运行(express)

       我们知道使用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就可以看到效果了。例如我的是这样的: 
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407084.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据链路层与交换机

1. 数据链路层的功能是什么?负责网络中相邻节点之间可靠的数据传输,并进行有效的流量和差错控制。具体地讲,以一次数据发送为例,数据链路层的作用包括数据链路的建立、维护与拆除、帧包装、帧传输、帧同步、帧的差错控制以及流量控…

编译vo-aacenc遇到的问题

sourceforge更新了vo-aacenc到0.1.3,就把自己的编码器也更新到最新。编译过程中无聊多测试了一下 发现一个小问题http://sourceforge.net/projects/opencore-amr/files/vo-aacenc/下载后解压 1 [gonglinux vo-aacenc-0.1.3]$ pwd 2 /home/gong/ff4android/vo-aacenc…

CSS之创建等高列布局之二

3. 给容器div使用单独的背景色(流体布局) 这种布局可以说是就是第二种布局方法,只是这里是一种多列的流体等高列的布局方法。前面也说过了,其实现原理就是给每一列添加相对应用的容器,并进行相互嵌套,并在…

Oracle中Number(p,s)的意义

From: http://www.chinabyte.com/biz/cbfwq/394/2650894.shtml number(p,s) p:1~38 s:-84~127 p>0&#xff0c;对s分2种情况分析&#xff1a; 1. s>0 精确到小数点右边s位&#xff0c;并四舍五入。然后检验有效数位是否<p&#xff1b;如果s>p&#xff0c;小数点…

Taro+react开发(38)注意请求接口的/

//获取课程课期 export const getLastOfflineLessonByCourseCode data > {return request.get(${vdp}/offlineLesson/getLastOfflineLessonByCourseCode,data); };

git 上传代码步骤

接下来 第一步&#xff1a;建立git仓库 cd到你的本地项目根目录下&#xff0c;执行git命令&#xff0c;此命令会在当前目录下创建一个.git文件夹。 git init 第二步&#xff1a;将项目的所有文件添加到仓库中 git add . 这个命令会把当前路径下的所有文件&#xff0c;添加…

CSS之创建等高列布局之三

4. 使用正padding和负margin对冲实现多列布局方法 这种方法很简单&#xff0c;就是在所有列中使用正的上、下padding和负的上、下margin&#xff0c;并在所有列外面加上一个容器&#xff0c;并设置overflow:hiden把溢出背景切掉。下面一起来看代码 HTML: CSS: 这里代码的关键…

一个 人 的 态度 决定 他 成功 的 高度

一个 人 的 态度 决定 他 成功 的 高度转载于:https://blog.51cto.com/sunwei/122390

var arr = [] 与 var arr = new Array();

new关键字的使用除了在需要实例化一个对象&#xff0c;或罕见的需要延时加载数据的情况外&#xff0c;你基本上不需要使用new关键字。在Javascript里分配大量的new变量地址是一项很慢的操作&#xff0c;为了效率起见&#xff0c;你应该始终使用对象符号。 new Array() 会实例化…

将windows下编辑好的文件(GBK)转换成Linux下的格式(UTF8)

背景&#xff1a;一般我们在windows上编辑好的文件默认编码是GBK&#xff0c;而且换行符是^M&#xff0c;为了将这些文件用在linux上&#xff0c;我们一般会将它们转换成Linux下的文件格式&#xff0c;即去掉^M&#xff0c;且将文件格式转换成UTF8。 这时&#xff0c;就会用到两…

git报错:‘fatal:remote origin already exists‘怎么处理?附上git常用操作以及说明。

git添加远程库的时候有可能出现如下的错误&#xff0c; 怎么解决&#xff1f; 只要两步&#xff1a; 1、先删除 $ git remote rm origin2、再次执行添加就可以了。   ----------------------------------------------git常用操作---------------------------------------…

CSS之两栏固定布局(一)

1. 固定布局之两栏布局——边栏在左边&#xff0c;主内容在右边 实现的布局效果&#xff1a;整个布局居中显示&#xff0c;而且侧栏显示在左边&#xff0c;主内容在右边 HTML&#xff1a; - div.wrapper是主容器&#xff0c;以960px为例&#xff0c;并且居中显示 - div.heade…

Html文件转换为Aspx文件后发现样式丢失或失效

css中中文注释导致aspx页面样式出错 今天遇到一个很奇怪的问题&#xff0c;网页设计把页面用层布局 发给我们以后&#xff0c;IE6下&#xff0c;静态HTML页面正常显示&#xff0c; 弄到vs里&#xff0c;扩展名改为aspx后页面就全变脸了&#xff0c;样式应用不上&#xff0c;布局…

bash日期操作

应用背景&#xff1a;我们经常会需要根据当前日期来产生所需要的文件名&#xff0c;或者产生10天内的文件&#xff0c;而这个文件名就是与日期有关的。 看下面的例子&#xff1a; [zcmbash #48]$cat dateoper.sh #!/bin/bash todaydate %Y%m%d filename"pre_"$today…

React开发(139):ant design学习指南之下载文件

isIE () > {if (!!window.ActiveXObject || ActiveXObject in window) {return true;} else {return false;}};//下载补充协议//agreementFilePathhandleDetail (row) > {if (this.isIE()) {// IEwindow.open(row.agreementFilePath, _blank);} else {let a document.…

iPhone不再孤独,Palm Pre为伴——互联网的未来在手中。

整整两年&#xff0c;两年前的今日&#xff0c;2007年1月9日&#xff0c;伟大的iPhone诞生了。就是今天&#xff0c;当我温习那次革命般的发布会&#xff0c;仍然很激动&#xff0c;仍然被乔布斯的激情所感染&#xff0c;甚至有点热泪盈眶。特别是看着乔布斯在揭开iPhone前&…

CSS之两栏固定布局(二)

3. 负margin布局 3.1 HTML: - 页面分为三个部分&#xff0c;头部&#xff08;div#header&#xff09;、主体&#xff08;div#page&#xff09;、脚部&#xff08;div#footer&#xff09;&#xff0c;同样在这三个容器中使用了内容器&#xff08;div.container&#xff09;用来…

在本地实现完成多台服务器之间文件拷贝

前言: linux怎么使多条命令同时执行 Linux scp 免密码 传输文件 问题1: 在本地实现完成两台服务器之间文件拷贝: 准备工作: 先在其中一台服务器上生成一对公钥和私钥; ssh-keygen; // 一直回车 然后把生成的公钥id_rsa.pub内容添加另一台服务器的authorized_keys文件中 在本…

我的随笔之二

临近年关了&#xff0c;随着回家的脚步越来越近&#xff0c;心情也变得越来越复杂和烦燥起来。这些天&#xff0c;完成了最后两篇文章的修改&#xff0c;在得知被51CTO安全频道采纳后&#xff0c;心中就无形中产生一种巨大的反抗情绪&#xff0c;让我不想再动手写点什么。但是&…