Cordova가 Vue 프로젝트를 패키지하는 방법-JS 튜토리얼-php.cn

Cordova가 Vue 프로젝트를 패키지하는 방법

小云云

풀어 주다： 2018-01-15 13:33:52

원래의

1803명이 탐색했습니다.

이 글은 주로 Cordova를 사용하여 Vue 프로젝트를 패키징하는 방법을 소개합니다. Vue 프로젝트를 앱에 패키징하는 방법에 대해 자세히 소개합니다. 관심이 있는 경우 자세히 알아보면 도움이 될 것입니다.

이제 중국에서는 점점 더 많은 개발자가 Vue를 사용하여 하이브리드 앱을 개발하고 있지만 모두가 개발을 완료한 후에는 Vue 프로젝트를 앱으로 패키징하는 방법을 모른다는 사실을 알게 됩니다.
현재 제가 이해한 바에 따르면 Vue 프로젝트를 패키징하는 가장 인기 있는 방법은 weex와 cordova를 사용하는 것입니다. Weex는 Alibaba에서 제공하며 Vue 작성자가 적극 권장합니다. 관심이 있으시면 배우고 사용해 보세요. 저는 Angular+ionic에서 작업하기 때문에 cordova를 선호합니다. 이제 cordova를 사용하여 Vue 프로젝트를 패키징하는 방법을 알려드리겠습니다.

1단계: cordova 설치

이미 설치되어 있으면 직접 건너뛰고, 그렇지 않으면 다음을 실행하세요. 다음 명령 :

npm install -g cordova

로그인 후 복사

이 명령이 작동하지 않으면 계속 읽지 않는 것이 좋습니다.

2단계: 새 코르도바 프로젝트 만들기

명령 실행

cordova create cordovaApp com.cordova.testapp
cd cordovaApp
cordova platform add android

로그인 후 복사

이 시점에서 코르도바 프로젝트가 생성됩니다.

3단계: vue 프로젝트 수정

vue 프로젝트가 없으면 Baidu로 이동하여 새 vue 프로젝트를 만듭니다.

먼저 vue 프로젝트의 index.html을 수정하세요

머리 사이에

<meta http-equiv="Content-Security-Policy" content="default-src &#39;self&#39; data: gap: https://ssl.gstatic.com &#39;unsafe-eval&#39;; style-src &#39;self&#39; &#39;unsafe-inline&#39;; media-src *; img-src &#39;self&#39; data: content:;">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

로그인 후 복사

추가하세요. 추가할 때<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">페이지 스타일이 변경될 수 있으니 그렇지 않으면 추가하지 마세요. , 추가하는 것이 좋습니다.

그런 다음 cordova.js를 소개합니다

<body>
  <p id="app"></p>
  <script type="text/javascript" src="cordova.js"></script>
  <!-- built files will be auto injected -->
</body>

로그인 후 복사

그런 다음 src의 main.js를 다음 코드로 수정합니다

// 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 &#39;vue&#39;
import App from &#39;./App&#39;
import router from &#39;./router&#39;
Vue.config.productionTip = false

/* eslint-disable no-new */

document.addEventListener(&#39;deviceready&#39;, function() {
  new Vue({
    el: &#39;#app&#39;,
    router,
    store,
    template: &#39;<App/>&#39;,
    components: { App }
  })
  window.navigator.splashscreen.hide()
}, false);

로그인 후 복사

마지막으로 config 폴더의 index.js 파일을 수정합니다

빌드의

을 수정합니다.

    assetsSubDirectory: &#39;static&#39;,
    assetsPublicPath: &#39;/&#39;,

로그인 후 복사

는

    assetsSubDirectory: &#39;&#39;,
    assetsPublicPath: &#39;&#39;,

로그인 후 복사

이고

npm run dev

로그인 후 복사

를 실행하여 지침이 정상이라면 여기에는 문제가 없습니다.

4단계: vue 파일을 cordova 프로젝트에 넣고 패키징합니다.

먼저 vue 프로젝트에서 실행하세요

npm run build

로그인 후 복사

실행이 완료되면 dist 폴더가 생성됩니다. 모든 파일을 여기에 넣으십시오. 파일을 코르도바 프로젝트의 www 폴더에 복사하고 원본 파일을 바꾸십시오.

그런 다음

cordova build android

로그인 후 복사

을 실행하면 실행 가능한 apk 파일이 생성되므로 설치하기만 하면 됩니다.

이제 vue 프로젝트의 패키징이 완료되었습니다.

알림:

npm run dev 또는 npm run build를 실행할 때 vue 프로젝트에 문제가 발생하는 경우(일반적으로 코드 오류는 아님) node_modules 폴더를 삭제하고 npm install을 사용하여 설치할 수 있습니다.

eslint로 인해 코드 검사가 실패하는 경우 Vue 프로젝트의 빌드 폴더에 있는 webpack.base.config 파일에서 규칙

      {
       test: /\.(js|vue)$/,
       loader: &#39;eslint-loader&#39;,
       enforce: &#39;pre&#39;,
       include: [resolve(&#39;src&#39;), resolve(&#39;test&#39;)],
       options: {
        formatter: require(&#39;eslint-friendly-formatter&#39;)
       }
      },

로그인 후 복사

을 주석 처리할 수 있습니다.