精华内容
下载资源
问答
  • vue 打包为app流程

    万次阅读 2018-07-28 12:44:54
    vue 打包为app 记录以下自己将web app打包成移动端app的步骤及问题 事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config...

    vue 打包为app

     

    记录以下自己将web app打包成移动端app的步骤及问题

     

    事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目

     

    1,将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './'

    2,执行npm run build之后生成dist文件夹

    3,打开HBuilder,文件->打开目录,如下图

    选择刚才生成的dist目录,输入项目名称,点击完成

    附HBuilder下载地址:http://www.dcloud.io/

     

    3,此时会看到HBuilder项目下多了一个W标识(表示web项目)的myApp项目,

     

    右键菜单选择‘转换成移动‘转换成移动App’,然后‘myApp’前面的标识就变成了‘A’,至此就已经转换成移动app了,

    随后就可以利用HBuilder连接真机运行

    或者发行成为原生app

     

    注意:如果真机运行或模拟器运行报如下错误

    Uncaught Error: [vuex] vuex requires a Promise polyfill in this browser

     

    可参考:http://www.jianshu.com/p/3e3b171179f8

     

     

    以下为以android apk为例的发行为原生app的步骤

    1,点击发行,这里发布测试apk选择使用DCloud公用证书,点击‘打包’

    2,正在制作安装包,制作完成,手动下载

    3,将下载的apk安装到android的手机看效果,以下是放到模拟器中的效果

     

      个人博客:http://chenfl.top

            欢迎小白前来学习,这里有最基础的前端技术学习总结,本人较菜,大神勿喷

    展开全文
  • Vue 打包发布流程

    万次阅读 2019-05-16 16:21:38
    Vue 打包发布流程 配置打包文件路径 在vue.config.js中设置 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/ynnt/' : '/' } 这里的ynnt就是我们基地址的路径。 执行打包命令 ...

    Vue 打包发布流程

    配置打包文件路径

    在vue.config.js中设置

    module.exports = {
      publicPath: process.env.NODE_ENV === 'production'
        ? '/ynnt/'
        : '/'
    }

    这里的ynnt就是我们基地址的路径。

    执行打包命令

    通过命令npm run build执行打包,最终在根目录下会生成dist文件夹,该文件就是我们打包后的文件。

    将打包文件放到服务器上

    将文件放入服务器中的tomcat中,放出连接地址就ok了。

    http://服务器域名:端口号/ynnt/

     

    展开全文
  • 因工作需要,需要我这边做一个将vue打包成apk的需求,搜索了很多资料,得到三种方法, 1. 是用apiClound来制作apk,官网入口 2. HBuilder 打包成apk 资料1 3. 用 vue+cordova打包 Android的apk 这里说一下第三...

    前言:

            因工作需要,需要我这边做一个将vue打包成apk的需求,搜索了很多资料,得到三种方法,

    1. 是用apiClound来制作apk官网入口  

    2. HBuilder 打包成apk  资料1  

    3. 用 vue+cordova打包 Androidapk

    这里说一下第三种方法:

    步骤一:cordova

    1. 全局安装环境   

          npm install -g cordova

    2.  创建 cordova 项目(直接使用就好了)

           (1)创建项目:cordova create cordova-app com.ysh mapp

           *注释:(1)名称是mapp,

                       (2)包名是com.ysh,

                       (3)项目名是cordova-app

           (2)安装依赖:cordova platform add android

    3.将上面的vue项目中的dist目录下的文件全部拷贝到cordova项目的www目录下

    注意:除了vue项目,,在此送大家2020 最新企业级Vue3.0/Js/ES6/TS/React/node等实战视频教程,点击此处  免费获取,小白勿入哦,

    步骤二:要运行打包成安卓的apk,需要配置安卓的环境

    注意:没有apk,直接运行打包命令会报错:Failed to find 'ANDROID_HOME' environment variable. Try setting it manually...

    1.配置 jdk (安卓的sdk环境变量配置必须配置这个)

    链接:https://pan.baidu.com/s/15Ktkn66dk3WfIOHOgBBrQA        提取码:i0v3

    此电脑右键--》属性--》高级系统设置--》环境变量

    (1)添加   JAVA_HOME   +你  jdk  的路径

    (2)path  里面添加     %JAVA_HOME%\bin

    (3)接下来验证配置是否成功  java -version

     

    2.安装sdk  官网入口

    百度网盘地址:

    链接:https://pan.baidu.com/s/1qvF4S0EPVrvvGW5Ow1aCGA        提取码:h6ty 

    此电脑右键--》属性--》高级系统设置--》环境变量

    (1)添加 ANDROID_HOME   +你  sdk  的路径

    (2)path  里面添加     %ANDROID_HOME%\platform-tools

    (3)Android SDK配置完成,接下来验证配置是否成功

             ***先重启cmd!!!!!!!!!!

              打开c盘,打开cmd小黑框,输入adb

     

     

    3.安装 gradle 教程入口

     

    步骤三:这里默认我们必需的三个环境变量已经配置好了

    1.在cordova-app中配置安卓插件

    如果之前有,不想要了,先删除android平台:

    cordova platform remove android

    如果之前没有,就直接安装:

    cordova platform add android

    2.用编译器或者直接打开我们的cordova-app项目文件夹

    3.输入打包命令(第一次特别慢,2-8分钟哦)  

    cordova build android --release

    4.打开我们在打包以后出现的apk的路径(注意,这里生成apk成功了,但是没有签名,模拟器还有手机是不运行他安装的,会提示安装失败)

    5.apk签名生成(注意,生成在你apk所在的文件夹底下,我这里做示例是用d盘根目录)

    keytool -genkey -v -keystore D:\mytest.keystore -alias mytest -keyalg RSA -validity 20000

    *注释:-keystore D:/mytest.keystore表示生成的证书及其存放路径,如果直接写文件名则默认生成在用户当前目录下;
          -alias mytest 表示证书的别名是mytest,不写这一项的话证书名字默认是mykey;
          -keyalg RSA 表示采用的RSA算法;
          -validity 20000表示证书的有效期是20000天。*

    注意:密码库口令,新口令虽然不显示,但是是存在的,这个要记住,给apk文件配置属于他的签名的时候需要

    6.解决生成签名时密钥库格式转移的报错问题

    输入:也就是提示的这一句

     keytool -importkeystore -srckeystore D:\mytest.keystore -destkeystore D:\mytest.keystore -deststoretype pkcs12

    然后输入口令,就生成成功了,看下面这个

    打开我的d盘根目录地下出现了这个,带old是我们之前密码规则有问题的,所以用

    mytest.keystore  这个文件

    7.将我们的签名与apk绑定起来

    打开以后,最终拥有的文件,应该和我这个是差不多的

    在此目录下打开cmd小黑框   输入:

    jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore mytest.keystore app-release-unsigned.apk mytest

    这里的密码短语就是你上面的密钥库口令(mytest.keystore必须和apk在同一目录地下)

      

    8.将你的apk改名放到模拟器,或者直接放手机上点击安装,进行测试

    我这里是雷电模拟器,有需要可以百度下载,

    注意:最后送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程,点击此处 免费获取,小白勿进哦

     

    展开全文
  • 这样很不灵活,先看一下vue打包后的文件结构,项目打包后会生成一个dist文件 ── dist ├── static // 外部静态资源文件夹,对应项目中的static文件夹 ,与index.html同级 └── ind...

    Vue 打包后,如果想修改整体的后台接口域名,或者图片文件的路径,就需要在源代码中修改后,再次进行build打包。这样很不灵活,先看一下vue打包后的文件结构,项目打包后会生成一个dist文件

    ── dist                 
       ├── static        // 外部静态资源文件夹,对应项目中的static文件夹 ,与index.html同级 
       └── index.html    // 项目入口主文件

    从上面的打包文件解构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入,然后就可以全局使用。

    具体的方法如下:
    1.在项目中找到static文件夹,在里面创建一个配置文件,起名为config.js

         如果不清楚项目结构的可以看一下前面我写的Vue项目目录结构说明与配置

    ┌── build 
    ├── config 
    ├── node_modules                    
    ├── src     
    ├── static  
    │   ├── config.js  // 配置文件
    │               
    ├── index.html: 
    

    2.然后在创建的config.js配置文件中,声明一个对象Glob,将它赋值给window,对象名字随便取,只要不占用关键字即可,对象中存放你所需要配置的各种路径和数据,如下:

    这里说明下,赋值给window,在vue里面获取不到window对象。所以不要赋值给window,直接定义个常量就好。

    /*window.Glod = {
        BaseUrl:"http://xxx.api.com", // 你的接口路径(正式)
        //BaseUrl:"http://xxx.apiTest.com", // 你的接口路径(测试)
        appkey:"",
        token:""
        .......
    
    }
    */
    const Glod = {
        BaseUrl:"http://xxx.api.com", // 你的接口路径(正式)
        //BaseUrl:"http://xxx.apiTest.com", // 你的接口路径(测试)
        appkey:"",
        token:""
        .......
    
    }

    3.将此配置文件在index.html 文件中引入

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>测试</title>
    		<script src="./static/config.js"></script>
      </head>
      <body>
        <div id="app"></div>
      </body>
    </html>
    注:引入的文件路径一定要正确哦,路由history模式下使用相对路径。不然的话会报语法错误‘Uncaught SyntaxError: Unexpected token <’

    4.使用。到这里相信会一点js基础知识的同学都知道怎么在项目中使用我们配置的数据,没错就是 Glob,比如我们要配置axios请求路径如下:不清楚怎么配置的同学可以看一下前面我写的vue axios请求 配置

    axios 配置文件
    import axios from 'axios' 
    ....
    let baseURL
    // 判断开发环境(一般用于本地代理)
    if (process.env.NODE_ENV === 'development') {      // 开发环境
        baseURL = '/api'
    } else {                                           // 编译环境
        if (process.env.type === 'test') { // 测试环境
            baseURL = Glob.BaseUrl  // 在这里使用配置文件中的域名
        } else {   // 正式环境                               
            baseURL = Glob.BaseUrl  // 在这里使用配置文件中的域名 
        }
    }
    const Axios = axios.create({
    	baseURL:baseURL , 		     
    	timeout: 60000, 		     
    	responseType: "json",
    	withCredentials: false
    });
    .....

    到此,项目的配置文件就已经设置好了,这样测试环境 和 正式环境的切换,或以后公司的后台服务器要迁移 和 域名更换等,就可以直接在配置文件中修改,而不用重新打包部署。

    需要注意一点,每次更改了配置文件,就需要重新进入一下项目,也就是重新刷新一下首页,让配置文件重新引入一次,覆盖掉原有的 Glob 对象,这样修改才会生效。

    展开全文
  • webpack vue 打包优化

    千次阅读 2018-07-16 10:42:23
    webpack vue 打包优化 问题描述 在项目优化中,有一种方案,不经常更新的第三方包可以不打在 vendor.js 中,可以在 .html 模板中引入,然后在 webpack 中配置排除这些包,但是会遇到一个问题,就是开发环境中,...
  • vue打包npm run build报错

    千次阅读 2019-12-04 12:04:01
    vue打包npm run build报错: 近期领导要求用vue做一个项目,最近在研究和学习vue,在项目打包时一直报错,这个问题困扰了好久,尝试了很多网上办法,但都没有用 电脑每次开机首次执行npm run build 可以打包成功 ,...
  • vue 打包发布

    万次阅读 2019-06-14 12:02:53
    1. 打包之前需要先修改config下的index.js文件中build,assetsPublicPath:'./' build: { //index.html路径 index: path.resolve(__dirname, '../dist/project/index.html'), //静态文件的路径 ...
  • vue打包加版本号

    千次阅读 2020-03-04 15:29:41
    vue打包会用随机字符串作为文件名,控制静态资源及时更新,但是有些时候,浏览器就是不更新,可以在引入静态资源后面再添加版本号。 vue-cli 2.0 修改build/webpack.prod.conf.js,在HtmlWebpackPlugin插件配置项...
  • Vue 反编译问题 ,如何将Vue打包好的.js.map 文件反编译成 .Vue文件
  • vue 打包添加版本号

    千次阅读 2020-09-08 17:08:09
    vue 打包添加版本号 1、在文件名后拼接版本号 vue打包时会用随机字符串作为文件名,控制静态资源及时更新,但是有些时候,浏览器就是不更新,可以在引入静态资源后面再添加版本号。 vue-cli 2.0 版本 修改 build/...
  • 10.vue打包成docker镜像

    千次阅读 2020-04-19 12:00:04
    10.vue打包成docker镜像 视屏地址: 1.使用nginx+vue打包好的静态页面 2.使用node+vue直接跑起来 nginx+静态页面 192.168.9.233/library/nginx:1.12 是我的私有库,可以使用公有的库 # vue打包 npm run build # 打包好...
  • Vue打包部署到Tomcat

    千次阅读 2018-10-15 10:06:53
    Vue打包部署到Tomcat 一,在config-->index.js中,设置build更改 assetsPublicPath: '/'为assetsPublicPath: './' module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath:...
  • vue打包后更改js文件名称

    千次阅读 2020-12-17 09:39:02
    vue打包后更改js文件名称 例如: 中间部分加时间戳 代码奉上 修改vue.config.js const Timestamp = new Date().getTime(); const name = "vue-demo"; // 标题 module.exports = { configureWebpack: { name: name...
  • VUE打包时报错

    千次阅读 2019-06-25 11:10:38
    VUE打包时报错 一直以来还没遇到解决不了的问题,然而今天遇到一个很头疼的问题,求助各位大佬!!! 问题来源: 使用了网上找来的一个emoji组件,不是通过npm install安装的插件,就是一个文件夹,直接拉到了项目中使用. ...
  • 修改Vue打包后的默认文件名

    万次阅读 2018-12-03 19:30:08
    因为我想在我的服务器上部署两个vue项目,但是vue打包后默认的项目名是dist,这样子就跟我上一个vue项目冲突了。因此查了一下资料。 二,解决方案 进入config ⇒ index.js,在build中将dist关键字改成其他名称即可...
  • Vue打包怎么在本地用Nginx部署?

    千次阅读 2019-09-17 18:16:55
    Vue打包 vue脚手架打包,在cmd执行下面命令,自己命好包的名字。 npm run build Nginx目录 主要关注画红框的文件跟文件夹: conf:里面包含重要的配置文件nginx.conf html:里面放置Vue打包的文件夹 logs:里面...
  • vue打包提高加载速度
  • electron-vue 打包错误

    千次阅读 2019-09-01 14:24:07
    electron-vue 打包错误 列举可能出现的问题,与解决方法 问题一:同时使用了npm与cnpm安装依赖 解决方法:删除项目中的node_modules文件夹,重新使用 npm或cnpm安装依赖。 重新安装完成后 重新打包即可。 问题二:...
  • vue打包后,发现样式缺失,或者有些样式有,有些没有,可能是因为css加载顺序问题导致编译后覆盖,在main.js中,按照element,app,router的顺序写,这样加载的时候就不会覆盖了,大概如下 ... import Vue from 'vue...
  • electron-vue打包后运行白屏解决办法

    千次阅读 2020-11-27 16:28:29
    electron-vue打包后运行白屏解决办法 找到.electron-vue文件夹中的webpack.renderer.config.js文件,注释掉下面这段 然后再重新打包,问题解决。
  • vue打包会自动生成 这是部署到服务器上的文件 但是你会发现项目打开是空白的 那是因为index.html文件中引用的路径不对 这是你要手动改index页面中所有引用路径 在 /static前加上 . 改成./static 但是手动改比较...
  • vue打包发布后,可以正常操作,但是如果我刷新页面或者在浏览器上方地址栏回车的话,报错404找不到页面,
  • 解决Vue打包上线之后部分CSS不生效的问题 更新时间:2019年11月12日 15:16:16 作者:墨咎 我要评论 今天小编就为大家分享一篇解决Vue打包上线之后部分CSS不生效的问题,具有很好的参考价值,希望对大家有所帮助。...
  • electron-vue打包成Mac版本

    千次阅读 2019-12-20 13:52:07
    一、场景: electron-vue是实用vue来搭建一个PC端的桌面应用.然后通过electron打包成不同华宁下的左面应用程序. 在mac电脑上如何将electron-vue打包成.app文件? 下面是对这个问题作出的操作 1、在项目的pac...
  • vue 打包】npm run build 打包卡住的问题 最近遇到了一个问题,使用 npm run build 打包的时候,会卡住不动 解决方法一 网上百度了很久,都说可能是访问 npm 源 超时的问题,改成淘宝镜像就好了 npm config set ...
  • vue打包app网络错误和空白页问题 https://my.oschina.net/gmarshal/blog/2051301
  • vue打包之后生成一个动态修改接口的配置文件 vue-cli3.0 使用vue-cli3.0脚手架,在项目根目录下的public文件夹下新增static文件夹,在static文件夹下新增config.js文件 在config.js文件中添加一个全局的window对象...
  • 在Eclipse中配置Maven build打包+vue打包

    千次阅读 2018-09-13 10:35:46
    在Eclipse中配置Maven build打包 项目右击–&gt;Run As–&gt;Run Configurations 在左侧Maven Build下选中自己的工程名 然后在右侧Goals输入框中输入“clean ...Vue打包指令 打包命令: npm run build...
  • vue 打包 tomcat下启动运行

    千次阅读 2019-05-11 17:40:02
    进行的vue打包,即打包后在tomcat下运行的说明。 npm run dev 运行开发测试环境 npm run build 打包正式环境 二、打包、运行 1、修改配置文件src/config/index.js如下 其中baseUrl中的pro即为正式环境...
  • vue打包之后,首屏加载过慢,响应很久,影响用户体验的优化 第一步:安装webpack-bundle-analyzer 分析包大小 cnpm i webpack-bundle-analyzer -S -D 在vue.config.js 文件中引用: const BundleAnalyzerPlugin ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 81,523
精华内容 32,609
关键字:

vue打包

vue 订阅