Chrome Extension에서 VueRouter 및 Vue.js 사용 - 경로 세그먼트 관련 문제
나는 Vue.js와 함께 크롬 확장을 개발한다.내가 라우팅을 사용하고 싶을 때 부품을 맞출 때까지 잘 작동한다.
localhost:8080/가 있는 로컬 개발 서버에서 다음 라우팅 설정을 사용할 때 문제가 되지 않음:
main.js.
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import OptionComponent from "./OptionComponent.vue";
const routes = [
{ path: '/', component: App },
{ path: '/option', component: OptionComponent },
];
Vue.use(VueRouter); // This makes all the magic hapen and Vue recognizes the router-view and router-link
const router = new VueRouter({
routes,
});
new Vue({
el: '#app',
router,
});
인덱스.포인트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CM Server Descriptor</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="libs/crypt.js"></script>
<script src="libs/jquery.js"></script>
<script src="libs/aja.min.js"></script>
<script src="libs/JSLINQ.js"></script>
<script src="js/build.js"></script>
</body>
</html>
Chrome-Extension에 배포하고 테스트를 시작하면 아무 일도 일어나지 않는다.나는 크롬 익스텐션이 특별한 경로 행동을 가지고 있다는 것을 알아냈다.
여기서 크롬에 여분의 /index.html 경로가 있음을 알 수 있다.
그때 내가 시도한 것은 다음과 같다.
const routes = [
{path: '/' + chrome.runtime.id + '/index.html', component: App},
{path: '/' + chrome.runtime.id + '/option', component: OptionComponent},
];
도와주지 않았다.로 변경 중/index그리고/어느 쪽도 도와주지 않았다...마지막 시도는 프로토콜에 대해 다음과 같이 설명하려고 시도했다.
{path: 'chrome-extension://' + chrome.runtime.id + '/', component: App},
운도 없다.나는 VueRouter가 http:/// 프로토콜 URL에만 작용한다고 가정한다.
만약 누군가 이 문제를 해결할 방법을 알고 있다면 나는 매우 감사할 것이다!
같은 문제가 있었는데 결국 고쳤다.1년이 지났기 때문에 크롬으로 고친 것인지, 부에로 고친 것인지 확실하지 않다.
어쨌든, 여기 새로 온 사람을 위해 쓸게.
Chrome 패스 URL은 폴더 구조를 기반으로 하며 암시적 URL 해상도는 없음.라는 뜻이다./로 리디렉션되지 않다.index.html해결책은 다음과 같다.
경로 추가 중 하나
index.html:{ path: '/index.html', component: App },또는 로드될 때 앱에 대한 경로를 추가하고 수동으로 푸시하십시오.
//router.js { path: '/app', component: App },
파일App.vue
created(){
this.$router.push('app');
}
그리고 라우팅 경로가 크롬 확장 루트의 상대 경로와 정확히 일치해야 한다는 것을 기억하십시오.그래서 만약 네가 말한다면.index.html당신의 부에, 확장 루트.baseUrl야 한다./
Chrome은 당신이 메인페스트에 등록한 popup.html 파일을 가리키고 있는데, 그러면 당신의 라우터에 의해 찾을 수 없을 것이다.
기본 URL을 popup.html로 설정하면(mainfest.json에 상대적인 위치에 따라 다름) 해결된다.
const router = new VueRouter({
base: '/popup/popup.html',
mode: 'history',
routes,
});
크롬 확장은 CSP(Content Security Policy)를 준수해야 하므로 vue 2는 eval()을 기반으로 하기 때문에 사용할 수 없다.
CSP 버전의 Vue 및 Vue-router 버전 1.0을 사용하여 다음 항목과 함께 진행하십시오.
부에 1.0-csp
https://github.com/vuejs/vue/tree/1.0-csp
부에루터 1.0
'Programing' 카테고리의 다른 글
| Vuetify 데이터 테이블 날짜 열을 포맷하는 방법? (0) | 2022.03.26 |
|---|---|
| 콜백을 기반으로 관찰 가능한 반환 (0) | 2022.03.26 |
| DOM 변경 전에 Vue-roouter로 경로를 변경할 때 화재 발생? (0) | 2022.03.26 |
| MySQLDB라는 모듈 없음 (0) | 2022.03.26 |
| VueJS 3(Vuex 4 포함): 상태가 업데이트되지 않음 (0) | 2022.03.25 |