(1)项目打包

终端运行命令 npm run build

打包成功的标志与项目的改变,如下图:

点击index.html,通过浏览器运行,出现以下报错,如图:

那么应该如何修改呢?
    具体步骤如下:

、查看package.js文件的scripts命令
、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件
、其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。
、终端运行 npm run build 即可。

此时点击index.html,通过浏览器运行便,发现动态绑定的static的图片找不到,故static必须使用绝对路径。将图片路径修改为绝对路径,至此,打包完成。

(2)运行打包项目

需要开启服务运行 
    使用http-server 运行(如没有安装http-server的,使用node 全局安装 http-server 即可,cnpm install http-server -g)

cd dist
http-server

.

vue项目打包步骤及运行打包项目的更多相关文章

  1. 发布项目到 Linux 上运行 Core 项目

    发布项目到 Linux 上运行 Core 项目 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 ASP.Net Core 给我们带来的最大的亮点就是跨平台,我在我电脑(win ...

  2. 【无私分享:ASP.NET CORE 项目实战(第十章)】发布项目到 Linux 上运行 Core 项目

    目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 ASP.Net Core 给我们带来的最大的亮点就是跨平台,我在我电脑(win7)上用虚拟机建了个 CentOS7 ,来演示下 ...

  3. 在Myeclipse中没有部署jeesite项目,但是每次运行其他项目时,还是会加载jeesite项目

    解决办法: 一.在以下路径中找到jeesite文件,并删除 1.Tomcat 7.0\conf\Catalina\localhost 2.Tomcat 7.0\webapps 3.Tomcat 7.0 ...

  4. Springboot项目打包成jar运行2种方式

    最近公司有个项目需要移植到SpringBoot框架上,项目里面又有许多第三方jar包,在linux服务器上最方便的就是用jar的方式来运行SpringBoot项目了,因此我研究了2种打jar包的方式, ...

  5. 使用Apache Tomcat Maven插件部署运行 Web 项目

    什么是Apache Tomcat Maven Plugin? Maven Plugin 是Apache Tomcat 提供的一个Maven插件,它可以在你没有tomcat容器时将任何一个war项目文件 ...

  6. webStrom 运行React-Native项目

    1.点击“Edit Configurations...” 2.点击“+”选择“npm” 3.“Name”随便输入一个名称,“Command”改为“help”,然后在点击“+”号. 4.选择“Run E ...

  7. eclipse git提交项目以及down项目大致步骤

    down git项目步骤: 复制了url之后,import projects项目选中from git ,会出现如下截图,信息会自动填充 填好信息一直Next即可 完成之后,打开“Git Reposit ...

  8. java项目打包成可运行的jar,main方法带参数

    转载 原文地址:http://www.cnblogs.com/neillee/p/6063808.html#commentform 将 java 项目打包成可运行的 jar 包(main 函数带参数) ...

  9. 基于Vue + webpack + Vue-cli 实现分环境打包项目

    需求由来:我公司项目上线发布至服务器分为三个环境分别为测试环境.预发布环境.生产环境:前期做法是项目通过脚步打包时由脚步把域名和后缀名之类的全部替换成要发布的环境所需要的,因为我公司的项目比较大由许许 ...

随机推荐

  1. js验证form表单示例

    js验证form表单示例 检测测试了js表单验证,无jQuery(简单的功能有时无需jQuery版本) js代码如下:   <script type="text/javascript& ...

  2. SPOJ:The Next Palindrome(贪心&思维)

    A positive integer is called a palindrome if its representation in the decimal system is the same wh ...

  3. [Codeforces 507E] Breaking Good

    [题目链接] https://codeforces.com/contest/507/problem/E [算法] 首先BFS求出1到其余点的最短路 , N到其余点的最短路,记为distA[]和dist ...

  4. 【BZOJ 2456】 mode

    [题目链接] 点击打开链接 [算法] 此题初看是大水题,只需调用std :: sort即可 但是,n最大500000,显然会超时 而且,内存限制1MB,我们连数组也开不了! 那怎么做呢 ? 我们发现, ...

  5. linux内存管理之uboot第一步

    在进入讲解linux内存管理的kernel阶段以前,了解一下uboot阶段是如何准备好内存物理设备的,这是非常有意义的.通常进入到linux内核阶段之后,对内存芯片的物理特性寄存器访问是比较少的,强调 ...

  6. Oracle 11g导出来的dmp导入到 10g的数据库(IMP-00010:不是有效的导出文件,头部验证失败)

    原文地址:http://www.cnblogs.com/alxc/archive/2011/03/25/1995279.html 因为喜欢新的东西,所以基本上电脑的开发工具都是最新的,oracle也装 ...

  7. HDU-ACM“菜鸟先飞”冬训系列赛——第10场

    Problem A 题意 给出l(房子宽度),d(pole距离房子的垂直距离),s(绳子长度),求可覆盖的面积 分析 一共四种情况 \[1.s<=d\] \[2.s<=sqrt(d*d+l ...

  8. bzoj 1858: [Scoi2010]序列操作【线段树】

    合并中间那块的时候没取max--WAWAWA 在线段树上维护一堆东西,分别是len区间长度,sm区间内1的个数,ll0区间从左开始最长连续0,ml0区间中间最长连续0,rl0区间从右开始最长连续0,l ...

  9. ARC102 C~D

    C: 枚举中间点,计算两边点差值,把个数乘起来即可 #include<iostream> #include<cstdio> #include<algorithm> ...

  10. js实现打字效果

    <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing& ...