<p><code></p> <p>现在国内越来越多的开发者使用<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>开发混合app,但是当大家开发完成过后才发现不知道该怎么将<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>项目打包成app。<br />现在的打包<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下。下面说说怎么使用cordova打包Vue项目:</p> <h3 id="articleHeader0">第一步:安装cordova,创建好cordova项目。</h3> <h3 id="articleHeader1">第二步:修改vue项目</h3> <p>首先修改vue项目的index.html,引入cordova.js。这个引入在浏览器打开会报错。要打包后运行在真机后方可看到效果</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<body></p> <div id=&quot;app&quot;></div> <p> <script type=&quot;text/javascript&quot; src=&quot;cordova.js&quot;></script><br /> <!-- built files will be auto injected --><br /> </body>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"cordova.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- built files will be auto injected --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></pre> <p>然后修改src中的main.js为以下代码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false document.addEventListener('deviceready', function() { new Vue({ el: '#app', router, store, template: '<App></span>',<br /> components: { App }<br /> })<br /> window.navigator.splashscreen.hide()<br /> }, false);<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>// The Vue build version to <span class="hljs-keyword">load</span> <span class="hljs-keyword">with</span> the <span class="hljs-string">`import`</span> command // (runtime-<span class="hljs-keyword">only</span> <span class="hljs-keyword">or</span> <span class="hljs-keyword">standalone</span>) has been <span class="hljs-keyword">set</span> <span class="hljs-keyword">in</span> webpack.base.conf <span class="hljs-keyword">with</span> an alias. <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span> Vue.config.productionTip = <span class="hljs-literal">false</span> document.addEventListener(<span class="hljs-string">'deviceready'</span>, <span class="hljs-keyword">function</span>() { <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, <span class="hljs-keyword">store</span>, <span class="hljs-keyword">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>, components: { App } }) window.navigator.splashscreen.hide() }, <span class="hljs-literal">false</span>); </code></pre> <p>最后修改config文件夹中的index.js文件,修改build中的</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="assetsSubDirectory: 'static', assetsPublicPath: '/', " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">assetsSubDirectory:</span> <span class="hljs-string">'static'</span>, <span class="hljs-string">assetsPublicPath:</span> <span class="hljs-string">'/'</span>, </code></pre> <p>为</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="assetsSubDirectory: '', assetsPublicPath: '', " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">assetsSubDirectory:</span> <span class="hljs-string">''</span>, <span class="hljs-string">assetsPublicPath:</span> <span class="hljs-string">''</span>, </code></pre> <h3 id="articleHeader2">第三步:运行</h3> <p>看看是否能够运行起来,如果正常说明到这里是没有问题的(注意这里运行的时候需要将document.addEventListener注释,<br />因为在浏览器环境下是找不到cordova.js的也就不能监听到deviceready的事件,打包在真机上才能实现监听)。</p> <h3 id="articleHeader3">第四步:将vue打包好的文件放到cordova项目中并打包cordova run <a href="http://www.js-code.com/tag/android" title="android" target="_blank">android</a>,会生成一个可执行的apk文件,也可以直接在真机上运行。安装即可。</h3> <h4>友情提示:</h4> <p>如果vue项目在运行npm run dev或者npm run build的时候遇到问题一般不是代码出错的话可以将<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_modules文件夹删除使用npm install安装。<br />如果是因为eslint导致代码检查不通过的话,可以将Vue项目的build文件夹下的webpack.base.config文件中的rules</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" { test: /.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code> { <span class="hljs-attribute">test</span>: /.(js|vue)$/, loader: <span class="hljs-string">'eslint-loader'</span>, enforce: <span class="hljs-string">'pre'</span>, include: [<span class="hljs-built_in">resolve</span>(<span class="hljs-string">'src'</span>), <span class="hljs-built_in">resolve</span>(<span class="hljs-string">'test'</span>)], options: { formatter: <span class="hljs-built_in">require</span>(<span class="hljs-string">'eslint-friendly-formatter'</span>) } }, </code></pre> <p>这段代码注释即可。</p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25172.html