美文网首页VueAndroid studio【idea】
App加载本地Vue项目(一起打包)

App加载本地Vue项目(一起打包)

作者: 取个帅气的名字真好 | 来源:发表于2019-07-18 14:29 被阅读67次

1、修改资源(html, css, js, img)根路径

 assetsPublicPath:'./' //vue-cli2
 assetsDir: './'     //vue-cli3

一定要注意是 ./ !!!

2、vue的路由模式为 hash.

3、Android加载Vue项目

3.1 将Vue项目生成的文件放到Android项目的Assets目录下,使用WebView的loadUrl方法加载就行了
mWebView.loadUrl("file:///android_asset/vue/index.html"); 

ps:以上访问的目录结构为 Assets/vue

3.2 vue中请求接口可能会跨域 安卓处理如下
WebSettings webSetting = mWebView.getSettings();
webSetting.setAllowUniversalAccessFromFileURLs(true);

4、iOS加载vue项目

Ios可以使用UIWebView或者WKWebView直接加载

<!--    UIWebView   -->
let mWebView = UIWebView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
let path = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "vue")

let url = URL(fileURLWithPath: path!)
self.view.addSubview(mWebView)
mWebView.loadRequest(URLRequest(url: url))
<!--    WKWebView   -->
let mWebView = WKWebView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
    
let path = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "vue")
    
let url = URL(fileURLWithPath: path!)
self.view.addSubview(mWebView)
mWebView.load(URLRequest(url: url))
放在App中打包无法访问

未完待续……

相关文章

  • App加载本地Vue项目(一起打包)

    1、修改资源(html, css, js, img)根路径 一定要注意是 ./ !!! 2、vue的路由模式为 ...

  • 2019-10-31 SpringBoot+Vue项目部署到Ng

    1、项目打包上传打包本地SpringBoot项目 打包Vue项目 或者 上传SpringBoot项目的jar包和V...

  • docker部署vue项目

    基本步骤 在本地打包vue项目成docker镜像(image) 上传至服务器加载镜像 拉取nginx 不指定版本会...

  • vue 动态加载图片路径

    在用vue-cli脚手架生成的vue项目开发中,动态加载图片本地运行没有问题,但是打包后图片无法显示,图片路径40...

  • Vue首屏加载慢的优化方案

    使用vue构建项目首屏加载时,出现加载慢,白屏的问题解决方案: 步骤一 webpack来打包vue项目,vendo...

  • 2019-05-10

    vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画 当打包构建应用时,Javascript...

  • vue 打包文件体积过大优化

    vue[打包的chunk-vendors.xxx.js文件过大导致加载过慢问题] 因app首页加载不流畅,于是去检...

  • natApp内网穿透

    natApp内网穿透 一、打包本地项目 以Vue项目为例: 修改public/index.html路径:将./用<...

  • Unity 加载Assetbundle场景

    加载本地AssetBundle场景:需要先将场景打包成AssetBundle,放在项目Assets下面的Strea...

  • 关于vue打包成app

    vue项目打包成app前需要先将文件打包运行: npm run build打包后会遇到页面为空, 因为打包后的in...

网友评论

    本文标题:App加载本地Vue项目(一起打包)

    本文链接:https://www.haomeiwen.com/subject/bqhklctx.html