默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config->index.js 这时再打包,页面能看到了,但是好多引用的文件路径不对. 然后再修改build->utils.js ,加上publicPath:'../../' 再打包,就好了

在浏览器上浏览vue项目时,后退按钮是可以正常返回上一页的,但是打包成app后,点击手机上的屋里返回按钮,就直接退出app回到桌面了, 以下是解决办法: 使用mui进行手机的物理键的监听 1.首先安装 vue-awesome-mui cnpm install vue-awesome-mui 2.在main.js中注册并使用 import Mui from 'vue-awesome-mui'; Vue.use(Mui); 3.在index.html中写如下的js代码 <script type=&quo

第一个坑:文件引用路径 现在项目我们什么都没动,是初始化之后直接打包的状态,打开dist/index.htmnl文件整个网页都是一片空白的. 爬坑: 打开 config文件夹/index.js文件 assetsPublicPath属性作用是指定编译发布的根目录,‘/’指的是项目的根目录 ,’./’指的是当前目录.(在 前面加一个  .) 第二个坑:路由history模式. 爬坑: 注释掉 hostory    否则还是会页面没法加载

问题: 在使用npm run build 打包后, 如果在页面中使用img标签引入,打包后的路径是由index.html开始访问的,真正访问的是Static/img/图片名, 是正确的, 但是写在css 中的background: url("../../assets/***.png") 0 0 no-repeat; 引入的图片,打包的图片却访问不到,因为在css目录下并没有static目录,所以此时要先回退两层到根节点处才可以正常获取图片 解决办法: 打开build/utils.js,

现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只需要一条命令就可以完成打包. 1.安装cordova这一步的前提是已经完成安装node和npm,如果没有安装的话,请先完成node和npm的安装.node安装:直接进入官网https://nodejs.org/zh-cn/,下载最新版本安装.安装之后在命令行中使用"node -v" 检查安

最近公司要求我们用apicloud做一个app,正好利用这个机会学习下app的制作过程~ 页面的开发过程跟我们平时开发一样,利用vue把页面全部完成,最后进行npm run build将项目打包. 接下来就是apicloud打包的过程,首先我们要去apicloud官网下载开发者工具,我下载是下面这款: 大家选择对应系统进行下载~ 接下来需要开发者注册apicloud账号~ 打开APICloud Studio 2软件,在顶部文件按钮中选择打开我们刚刚打包好的dist文件. 然后我们继续点击顶部的文

一.准备开发工具 开发工具:HBuilderX 官网地址:http://www.dcloud.io (标准版需要自己安装插件,app开发版已经把app开发常用的插件安装好了,开箱即用,建议使用开发版) 二.打包生成一个vue项目 就拿手头上一个vue项目进行打包,vue项目预览如下: 打包生成的项目结构: 三.创建HBuilder的app项目 (请先注册HBuilde账号并登录,打包的时候需要登录,并获取应用识别AppID) 创建完后会看到以下结构: 其中css.img.js文件夹换成打包后的s

vue-cli 版本:2.9.6   webpack 版本:3.6.0 1. vue-cli 安装好之后,不是自动打开默认浏览器 在 config文件夹 ---> dev选项中,有个 autoOpenBrowser .把它置为 true 即可. 2. 使用less(或者sass)全局变量 起因: 因为想定义一些常用的工具样式.类似:超过一行隐藏字体并用省略号显示,清除浮动,主题颜色等.就考虑不用每个页面都引入,能直接使用定义的工具样式. 第一步: 安装  npm install sass-res

查看了很多网上写的改来改去都在手机上运行不起来,运行起来又是白屏:最后放弃,自己结合文档搞吧! 1. 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”,改为“./”后,打包生成的 dist 文件. 注释:config文件夹里的index.js中有两个assetsPublicPath,记住是改 build对象下的 assetsPublicPath 完了之后,打包, 执行npm run build之后生成dist文件夹 2. 在

安装Vue&创建Vue工程 1.安装Vue CLI: npm install -g vue-cli 2.创建新的Vue项目,创建最后一步会提醒是否使用npm install 自动安装,如果选择N,在第2步后,手动执行:npm install vue init webpack my-project 或 vue create my-project或vue init webpack-simple my-project (目录简单) #若想安装快速,在最后一步提示是否使用npm install命令时,选

将移动端页面打包成app 1.使用 HBuilder 直接编译打包 点击左上角 文件>打开目录>选择目录  选择用Webpack打包好的dist文件目录 由于我添加到项目了,所以会显示该项目名称已存在,请重新输入. 2.接着点击完成,就可以在目录中看到dist 这里dist前面的标志应该是W  由于我转换过一次,就会显示A 3.鼠标右键点击dist目录,选择`转换成移动App`,成功之后目录前面的图标就会变成 A 同时会多出一个 `manifest.json文件` 4.双击`manifest.

项目创建完成,启动正常,接下来就是项目打包了.将测试Demo打包成exe桌面应用,点击exe文件,运行项目. 书接上文,创建项目有三种方式 Git拷贝.直接创建:通过electron社群提供的命令行工具(CLI)  electron-forge 创建项目,看起来对应的项目打包方式也应该有三种才对,但其实细看第一种方式和第三种项目创建方式是一样的,所以它们的项目打包方式也是一样的. 打包 electron 项目webpack工具有 electron-packager 和 electron-buil

前段时间在利用工作之余开发了tomato timer这个蕃茄钟,然后部署到github.io上,由于greatway太厉害,偶尔会有打不开的情况.上周末对比做了扩展和改进,使其成为chrome的插件,或者成为桌面app. chrome插件的使用与开发 一.如何安装与使用: 1.下载tomato timer项目,github地址 https://github.com/cqhaibin/tomato-timer.git 2.切换到V2.0.0.0的tag,然后如下图所配置: 3.然后单击 “小飞”图

作为一个cordova小白,我按照官方文档和网上资料完成了讲vue文件打包到cordova中并打包成apk文件,完成了一个简单app的制作,当我正陶醉于可以自己完成一个app的时候突然发现,我的app居然无法访问服务器数据,这时我疯狂地去找解决方案,然而可能是我的搜索能力太差了,一直没有找到解决方法,最后当我即将放弃的时候发现了一个方法,觉得它是比较靠谱的,果不其然,解决了我的问题. 出现这种原因是因为我安装的android sdk是属于高版本的,在高版本的android sdk中默认开启了对非

首先用HBuilderX新建建一个uni-app项目 新建一个目录ucenter,该目录下新建两个vue文件ucenter.vue和setting.vue ucenter.vue <template> <view class="container"> <text>{{ name }}的个人中心</text> <navigator url="../ucenter/setting" hover-class="

vue打包,我们都清楚,实在记不住命令的可以去package.json中看: npm run build 打包后会生成dist文件夹,将dist文件夹下的所有文件复制到Apache下的www的文件夹下,然后在localhost的80端口下即可访问. 但此时还有一个问题:点击链接改变路由后,服务器会报错!如下图: 解决方法: 打开apache的配置文件 释放rewrite模块,寻找以下代码,将前面的#去掉 LoadModule rewrite_module modules/mod_rewrite.

vue打包前的配置: 项目目录下--> config文件夹---> index.js: build:  { assetsPublickPath:  './',   // 设置成相对路径   '/' 改为 './' productionSourceMap: false, // 开发环境默认为true , 打包生产代码前设置为false } vue打包后运行在本地/非服务器端环境的访问路径 PC端: file:///E:/program files/www/index.html#/index 移动

由于h5应用开发不是本例重点,因此直接提供一个最简单的h5应用代码,此应用使用vue-cli框架开发 此h5应用叫vue1,用webstrom打开vue1,进行npm install安装引用 vue1代码可从百度网盘下载:链接: https://pan.baidu.com/s/1eSq71IU 密码: 1spk PS:此套代码npm install时会报错 可以运行以下命令解决: npm install chromedriver --chromedriver_cdnurl=http://cdn.

vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'history'手动添加: dist包不是服务器跟目录,在index.htm里手动给js和css添加dist目录即可/dist/: 3.或者使用mode:'history'修改配置: config里面的index.js找到env: require('./prod.env')模块(新版本build: {),将下面

1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误 改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的. 2.src里边router/index.js路由配置里边默认模式是mode:'hash'(页面会在路由上加#),有时候改成了history(纯净路由)模式的话,打开也会是一片空白.所以改为hash或者直接把模式配置删除,让它默认的就行 . e

1.vue打包dist文件时,图片找不到,无法像在本地一样查看 问题描述: 本地代码:<div class="icon"><img :src="'../../src/assets/img/usecar/' + item.appIcon +'.png'" width="50" height="50"/></div>   (显示正常)   测试服务器:打包dist文件到测试服务器后,显示不正常