Vue项目用于Ios和Android端开发
<div><h2>vue项目构建</h2>
<h3>预备</h3>
<p>vue中文文档: https://cn.vuejs.org/v2/guide/instance.html</p>
<p>构建工具环境<br data-filtered="filtered">nodejs: http://nodejs.cn</p>
<p>构建工具vue-cli:<br data-filtered="filtered">https://github.com/vuejs/vue-cli</p>
<p>如果是第一次接触vue或者在已有项目中引入vue时可以选择用CDN版本或者下载js文件</p>
<p>vue的生产版本js：<br data-filtered="filtered">https://vuejs.org/js/vue.min.js</p>
<p>引入CDN版本：</p>
</div>
<div class="cnblogs_code">
<pre><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script></pre>
</div>
<h3>构建项目</h3>
<p>如果是作为一个新项目，还是建议使用vue-cli构建项目，省时省心</p>
<p>安装完nodejs环境后在终端里输入:</p>
<div class="cnblogs_code">
<pre>npm install --global vue-cli</pre>
</div>
<p>进入要存放项目的目录后创建一个基于webpack模板的新项目</p>
<div class="cnblogs_code">
<pre>vue init webpack my-project</pre>
</div>
<p>其他模板还有pwa、browserify、webpack-simple、simple、browserify-simple等，可以自行到Github上了解：https://github.com/vuejs-templates</p>
<div>
<div>在构建时有这么几个选项需要注意：<br data-filtered="filtered">Vue build:<br data-filtered="filtered">选择Runtime + Compiler: recommended for most users<br data-filtered="filtered">官方的解释https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时</div>
<p>vue-router:<br data-filtered="filtered">建议选上，文档地址 https://router.vuejs.org/zh-cn/</p>
<p>ESLint:<br data-filtered="filtered">建议选上，模板使用Standard ,官网地址 https://eslint.org</p>
<div>
<div>
<h3>编译与运行</h3>
<p>进入项目根目录打开<code>package.json</code>文件可以看到项目的各项配置，其中<code>scripts</code>下存放的是各种命令，在命令行中通过<code>npm run ***</code>来执行</p>
<div class="cnblogs_code">
<pre>npm run dev 或者 npm start</pre>
</div>
<p>相当于执行<code>webpack-dev-server --config build/webpack.dev.conf.js</code>启动开发环境</p>
<p>在开发中经常会使用<code>process.env.***</code>的值来区分不同的环境。环境变量的值在<code>/config/*.env.js</code>文件中配置，<code>webpack.dev.conf.js</code>文件中引入的配置文件是<code>dev.env.js</code>，我们可以在开发是判断<code>process.env.NODE_ENV</code>的值是否为<code>development</code>来确定当前环境是否为开发环境</p>
<p>在不改任何配置的情况下启动后，在浏览器中输入<code>http://localhost:8080</code>就可以看到效果了 </p>
<div class="image-package">
<div class="image-container">
<div class="image-view" data-width="2400" data-height="1554"><img src="https://upload-images.jianshu.io/upload_images/2569822-e33eaeba126f6b31.jpg"></div>
</div>
<div class="image-caption">
<div class="cnblogs_code">
<pre> npm run build</pre>
</div>
</div>
</div>
<p>执行此命令后会对当前项目进行编译打包,编译完成后我们就可以在<code>/dist</code>目录下看到我们需要的项目文件了。</p>
<p>编译完成后可以在终端上看到这样一段温馨提示，“不允许通过直接打开index.html文件进行访问哦”</p>
<div class="image-package">
<div class="image-container">
<div class="image-view" data-width="892" data-height="164"><img src="https://upload-images.jianshu.io/upload_images/2569822-880a1765c6495f8d.jpg"></div>
</div>
</div>
<p>这也就意味着将打包后的项目直接放到Ios或Android项目中使用webview加载也是不允许的。这可如何是好呢？<br data-filtered="filtered">我们偷偷的点开/dist/index.html文件看看会发生什么吧</p>
<div class="image-package">
<div class="image-container">
<div class="image-view" data-width="2400" data-height="1554"><img src="https://upload-images.jianshu.io/upload_images/2569822-e2cb67773799f8ec.jpg"></div>
</div>
</div>
<p>一片空白并且报了<code>ERR_FILE_NOT_FOUND</code>的错误，没有找到css和js文件。用编辑器打开文件后可以看到，这几个文件的路径确实有些问题，于是在路径前加上一个<code>.</code>号后发现打开页面不再是一片空白了。 </p>
<div class="image-package">
<div class="image-container">
<div class="image-view" data-width="2208" data-height="216"><img src="https://upload-images.jianshu.io/upload_images/2569822-bacee6e2b4459b23.jpg"></div>
</div>
</div>
<p>但是，我们不可能每次编译都重新手动修改一次文件吧？很明显这个是可以在编译的配置里面设置的.<br data-filtered="filtered">打开<code>/config/index.js</code>文件，找到<code>build {}</code>的配置下有一个<code>assetsPublicPath: '/'</code>的参数配置，修改成<code>assetsPublicPath: './'</code>就好啦，执行<code>npm run build</code>后资源文件的路径就修改成<code>./</code>了。</p>
<div class="image-package">
<div class="image-container">
<div class="image-view" data-width="1458" data-height="1086"><img src="https://upload-images.jianshu.io/upload_images/2569822-eafbcd02d818af0f.jpg"></div>
</div>
</div>
<p>现在无论是用<code>http://</code>还是<code>file://</code>访问都没问题了。放到Ios或者Android项目中应该也没有问题了</p>
<h4>关于source map</h4>
<p>使用webpack编译后会发现每个资源文件都有一个对应的<code>.map</code>文件，而且这个文件所占的体积还不小，在没加任何代码的情况下将项目文件压缩成zip包后大小为227k，如果删除.map文件后只有50k，可以想象.map文件对项目体积的影响。<br data-filtered="filtered">在编译完项目后我们自己写的所有js代码会被压缩到一个<code>app.***.js</code>文件中，这时候如果在线上某个函数报错了，.map文件可以帮我们定位到报错的函数具体是在哪个文件里的。然而大多数情况下<code>.map</code>文件是没有必要打包放到线上的.<br data-filtered="filtered">打开<code>/config/index.js</code>文件，找到<code>build {}</code>的配置下的<code>productionSourceMap</code>改成false就不会生成.map文件啦 </p>
<div class="image-package">
<div class="image-container">
<div class="image-view" data-width="1162" data-height="1138"><img src="https://upload-images.jianshu.io/upload_images/2569822-383dc9ba7ba5cd87.jpg"></div>
</div>
</div>
<p>压缩打包</p>
<p>在一般项目中在开发完成后我们通常会将文件打包成一个zip文件，这样不但方便保存和传输，还有一种仪式感。那么要怎样在编译完成之后自动打包成zip文件呢。<br data-filtered="filtered">首先我们需要安装一个<code>webpack-zip-plugin</code>工具</p>
<div class="cnblogs_code">
<pre>npm i webpack-zip-plugin --save-dev</pre>
</div>
<p>然后打开<code>/build/webpack.prod.conf.js</code>文件，在文件中引入相关的包</p>
<div class="cnblogs_code">
<pre>const WebpackZipPlugin =require('webpack-zip-plugin')</pre>
</div>
<p>在<code>plugin: []</code>中加入<code>WebpackZipPlugin</code>的配置：</p>
<div class="cnblogs_code">
<pre> new WebpackZipPlugin({
initialFile: './dist/release/',//需要打包的文件夹(一般为dist)
endPath: './dist/release/',//打包到对应目录（一般为当前目录'./'）
zipName: 'release.zip' //打包生成的文件名
})</pre>
</div>
<p>可以在<code>dist</code>目录下看到<code>release.zip</code>文件啦。</p>
<h4>关于跨域</h4>
<p>在本地开发的时候如果要调用服务端的接口，肯定会遇到跨域问题，这时候我们只需要在<code>/config/index.js</code>文件中的<code>dev: {}</code>里面加上proxyTable就行了</p>
<div class="cnblogs_code">
<pre>proxyTable:{
'/server': {
target: 'http://192.168.11.5:3001'
}
}</pre>
</div>
<p>这样我们就可以将<code>http://localhost:8080/server</code>路径的所有请求都转发到<code>http://192.168.11.5:3001/server</code>下了</p>
<h2>Android项目</h2>
<h3>关于WebView</h3>
<p>无论是Android的WebView还是Ios的UIWebView和WKWebView都只是提供一套接口方便开发者调用，而实际工作都是交给WebKit完成的。后来Google在WebKit的基础上按照自己的风格与优化出了Blink，用于自己的浏览器产品。由Blink我们可以看出Google在Android的WebView优化上做出了不少的努力。但是还是会难以抑制的担心系统WebView的性能，尤其是当看到腾讯X5内核标注的技术特性。不管怎样，腾讯爸爸的话还是要信的，所以在demo中使用了X5内核。</p>
<div class="image-package">
<div class="image-container">
<div class="image-view" data-width="2256" data-height="1246"><img src="https://upload-images.jianshu.io/upload_images/2569822-d2ba5e9045d4c1e3.jpg"></div>
</div>
<div class="image-caption">image</div>
</div>
<p>http://x5.tencent.com/tbs/guide/procIntro.html</p>
<h3>加载vue项目</h3>
<p>将Vue项目生成的文件放到Android项目的Assets目录下，使用WebView的loadUrl方法加载就行了</p>
<div class="cnblogs_code">
<pre>mWebView.loadUrl("file:///android_asset/vue/index.html"); </pre>
</div>
<h3>关于跨域</h3>
<p>如果vue项目中有请求服务端数据的功能，就有可能产生跨域的问题，日志中会发现如下错误</p>
<div class="cnblogs_code">
<pre>No 'Access-Control-Allow-Origin' header is present on the requested resource.</pre>
</div>
<p>Android的WebView处理跨域问题很简单，只要将AllowUniversalAccessFromFileURLs设置为True就行了</p>
<div class="cnblogs_code">
<pre>WebSettings webSetting = mWebView.getSettings();
webSetting.setAllowUniversalAccessFromFileURLs(true);</pre>
</div>
<h2>Ios项目</h2>
<h3>加载vue项目</h3>
<p>Ios可以使用UIWebView或者WKWebView直接加载</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<pre><!-- 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))</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<h2>demo</h2>
<p>github: https://github.com/ljnjiannan/vue-demo</p>
<p> </p>
<p>非常感谢作者贡献，借鉴</p>
</div>
</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
----淡定从容，宁静致远----<br><br>
来源：https://www.cnblogs.com/matd/p/12966392.html
頁:
[1]