использовать VueRouter и Vue.js в расширении Chrome - проблемы с сегментами пути

Question

использовать VueRouter и Vue.js в расширении Chrome - проблемы с сегментами пути

1

Я разрабатываю хром-расширение с 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,
});

index.html

<!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 и начинаю тестировать его, ничего не происходит. Я понял, что расширение хром имеет некоторые особые пути поведения.

Здесь вы можете увидеть, что в chrome есть путь /index.html, который здесь лишний.

То, что я тогда пробовал, следующее:

const routes = [
  {path: '/' + chrome.runtime.id + '/index.html', component: App},
  {path: '/' + chrome.runtime.id + '/option', component: OptionComponent},
];

Не помогло. Изменение на /index и / не помогло ни... Last try пыталась явно сообщать протокол:

  {path: 'chrome-extension://' + chrome.runtime.id + '/', component: App},

Не повезло. Я предполагаю, что VueRouter работает только с URL- адресами http://.

Если у кого-то есть идея, как обойти это, я буду очень благодарен!

xetra11 13 июнь 2017, в 22:10

Источник

Теги:

javascript

vue.js

vue-router

routing

google-chrome-extension

2 ответа

Ещё вопросы

zentby · Answer 1 · 2018-08-05T20-00-00.000Z

У меня была такая же проблема, и я, наконец, ее исправил. Это был год, поэтому не был уверен, что он был исправлен хромом или Vue.

Во всяком случае, я запишу для любого нового здесь:

URL-адрес перехода Chrome на основе структуры папок и неявного разрешения URL-адреса. Это означает / не будет перенаправлять на index.html. Таким образом, решение:

Либо добавьте путь для index.html :
```
{ path: '/index.html', component: App },
```
Или добавьте путь для своего приложения и вручную нажмите на него при загрузке.
```
//router.js
{ path: '/app', component: App },
```

Файл App.vue

created(){
    this.$router.push('app');
}

И помните, что путь маршрутизации должен точно соответствовать относительному пути в вашем корне расширения chrome. Поэтому, если вы поместите index.html в корневой каталог расширения, ваш Vue baseUrl должен быть /

о мой Большое спасибо за этот ответ.

mad · Answer 2 · 2018-01-02T18-32-00.000Z

Расширения Chrome должны соответствовать политике безопасности контента (CSP), поэтому вы не можете использовать Vue 2, потому что она основана на eval().

Вы должны использовать версию VUE Vue и Vue-router версии 1.0 для CSP:

Vue 1.0-csp

https://github.com/vuejs/vue/tree/1.0-csp

Vue-router 1.0

https://github.com/vuejs/vue-router/tree/1.0

Этот ответ не имеет значения и совершенно неверен. -1 vuejs.org/v2/guide/installation.html#CSP-environments
Vue 2 также является CSP-совместимым, как говорится в приведенном выше комментарии.