Cordova가 Vue 프로젝트를 패키지하는 방법
- 小云云원래의
- 2018-01-15 13:33:521853검색
이 글은 주로 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 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' 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">
추가하세요. 추가할 때dd42d94925fdb9bfa5a5dbe5c987c627페이지 스타일이 변경될 수 있으니 그렇지 않으면 추가하지 마세요. , 추가하는 것이 좋습니다.
그런 다음 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 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
document.addEventListener('deviceready', function() {
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
window.navigator.splashscreen.hide()
}, false);마지막으로 config 폴더의 index.js 파일을 수정합니다
빌드의
을 수정합니다.
assetsSubDirectory: 'static',
assetsPublicPath: '/',는
assetsSubDirectory: '',
assetsPublicPath: '',이고
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: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},을 주석 처리할 수 있습니다.
관련 권장 사항:
제거 방법 vue 프로젝트 홈페이지 로딩 속도 최적화 예시 공유
vue 프로젝트의 공통 구성 요소 및 프레임워크 구조에 대한 공유
위 내용은 Cordova가 Vue 프로젝트를 패키지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!