vue项目打包步骤及运行打包项目
(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项目打包步骤及运行打包项目的更多相关文章
- 发布项目到 Linux 上运行 Core 项目
发布项目到 Linux 上运行 Core 项目 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 ASP.Net Core 给我们带来的最大的亮点就是跨平台,我在我电脑(win ...
- 【无私分享:ASP.NET CORE 项目实战(第十章)】发布项目到 Linux 上运行 Core 项目
目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 ASP.Net Core 给我们带来的最大的亮点就是跨平台,我在我电脑(win7)上用虚拟机建了个 CentOS7 ,来演示下 ...
- 在Myeclipse中没有部署jeesite项目,但是每次运行其他项目时,还是会加载jeesite项目
解决办法: 一.在以下路径中找到jeesite文件,并删除 1.Tomcat 7.0\conf\Catalina\localhost 2.Tomcat 7.0\webapps 3.Tomcat 7.0 ...
- Springboot项目打包成jar运行2种方式
最近公司有个项目需要移植到SpringBoot框架上,项目里面又有许多第三方jar包,在linux服务器上最方便的就是用jar的方式来运行SpringBoot项目了,因此我研究了2种打jar包的方式, ...
- 使用Apache Tomcat Maven插件部署运行 Web 项目
什么是Apache Tomcat Maven Plugin? Maven Plugin 是Apache Tomcat 提供的一个Maven插件,它可以在你没有tomcat容器时将任何一个war项目文件 ...
- webStrom 运行React-Native项目
1.点击“Edit Configurations...” 2.点击“+”选择“npm” 3.“Name”随便输入一个名称,“Command”改为“help”,然后在点击“+”号. 4.选择“Run E ...
- eclipse git提交项目以及down项目大致步骤
down git项目步骤: 复制了url之后,import projects项目选中from git ,会出现如下截图,信息会自动填充 填好信息一直Next即可 完成之后,打开“Git Reposit ...
- java项目打包成可运行的jar,main方法带参数
转载 原文地址:http://www.cnblogs.com/neillee/p/6063808.html#commentform 将 java 项目打包成可运行的 jar 包(main 函数带参数) ...
- 基于Vue + webpack + Vue-cli 实现分环境打包项目
需求由来:我公司项目上线发布至服务器分为三个环境分别为测试环境.预发布环境.生产环境:前期做法是项目通过脚步打包时由脚步把域名和后缀名之类的全部替换成要发布的环境所需要的,因为我公司的项目比较大由许许 ...
随机推荐
- python 闭包变量不允许write,要使用nonlocal
以下是一段简单的闭包代码示例: def foo(): m=3 n=5 def bar(): a=4 return m+n+a return bar >>>bar = foo() &g ...
- 【转】Android性能优化之GPU过度绘制与图形渲染优化
标签: android / 优化 / 过度绘制 / 图形渲染优化 Android之GPU过度绘制与图形渲染优化 写在前面的话 本文主要对过度绘制和图形渲染做一个概念性的描述,和简单的优化措施. 如果你 ...
- Remove '@override' annotation解决办法
最近刚刚配置了新机器,将原来的代码放在eclipse上执行,总会出现Remove '@override' annotation,如果要一个个手动删除相当麻烦,最后在网上找了一下原因原来是编译器版本的问 ...
- I.MX6 逻辑分析仪 UART
/*********************************************************************** * I.MX6 逻辑分析仪 UART * 说明: * ...
- Windows JDK 1.8降级为1.7方法
转自:https://www.aliyun.com/jiaocheng/890626.html 正常情况下,JDK的升降级只需更改环境变量即可 可是到了1.8版本,Oracle使了一点小手段, 在系统 ...
- Postgresql空库发布或者部分空库,模式,表处理备份流程
--备份数据库结构pg_dump -h localhost -p 8101 -d qhsoam -s -f /tmp/nodata.sql --仅备份某模式和该模式下的数据表结构pg_dump -h ...
- Mac 下安装配置jdk
jdk官网下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 1. Mac自带了的JDK6,安装在目录:/ ...
- linux php5.6 提示 could not find driver
1.进入在PHP源码包中进入ext/pdo_mysql # wget http://pecl.php.net/get/PDO_MYSQL-1.0.2.tgz 2.然后是解压缩. # tar -zxvf ...
- [SHOI2002]舞会
Descriptio 某学校要召开一个舞会,已知有N名学生,有些学生曾经互相跳过舞.当然跳过舞的一定是一个男生和一个女生,在这个舞会上,要求被邀请的学生中任一对男生和女生互相都不能跳过舞.问最多可邀请 ...
- [BZOJ1453]Dface双面棋盘
Description Input Output Sample Input Sample Output HINT 线段树+并查集,暴力记录和更新一些信息,详情见代码注解. #include<cm ...