(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. bzoj 3781 小B的询问 —— 莫队

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3781 就是莫队,左端点分块排序,块内按右端点排序,然后直接做即可. 代码如下: #inclu ...

  2. MySQL-业务优化——说的就是变

    前言 通过上次发布的业务优化不是一步到位的有不少网友问我许多关于业务优化和Web方面的问题.在这里表示感谢和支持.在期间有些回答不到位的还请谅解,并且个人经验有限. 百牛信息技术bainiu.ltd整 ...

  3. WebLogic之eclipse安装WebLogic插件

    转自:https://blog.csdn.net/magi1201/article/details/38323775

  4. asp.net mvc5 使用百度ueditor 本编辑器完整示例(下)配置上传播放视频

    通过 asp.net mvc5 使用百度ueditor 本编辑器完整示例(上)介绍,可以上传图片到服务器了,也可以上传小的视频文件,并且由百度编辑器自动加入html5<video>标签播放 ...

  5. java笔记之线程方式1启动线程

    * 需求:我们要实现多线程的程序. * 如何实现呢? *   由于线程是依赖进程而存在的,所以我们应该先创建一个进程出来. *   而进程是由系统创建的,所以我们应该去调用系统功能创建一个进程. * ...

  6. 多选下拉框(select 下拉多选)

    方法一:使用multiple-select.js和multiple-select .css实现 HTML代码: <select id='checkedLevel' style="wid ...

  7. golang——关于for循环的学习

    1.for循环的用法 (1)常规用法 func main() { slice := []int{1, 2, 3, 4, 5, 6} //方式1 for i := 0; i < len(slice ...

  8. python3 写CSV文件多一个空行的解决办法

    Python文档中有提到: open('eggs.csv', newline='') 也就是说,打开文件的时候多指定一个参数.Python文档中也有这样的示例: import csvwith open ...

  9. Lightoj 1071 - Baker Vai (双线程DP)

    题目连接: http://lightoj.com/volume_showproblem.php?problem=1071 题目大意: 一个n*m的格子,Baker Vai要从(1,1)到(n,m)再回 ...

  10. ACM_跳坑小能手(暴力)

    跳坑小能手 Time Limit: 2000/1000ms (Java/Others) Problem Description: GDUFE-GAME现场有一个游戏场地人头窜动,围观参与游戏的学生在场 ...