1
Vue.jsでクロム拡張を開発しています私はルーティングを使用するときに私は部分をヒットするまでうまく動作します。私は私の地元の現像サーバーでChrome拡張機能のVueRouterと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拡張機能にデプロイし、そこからテストを開始してください。何も起こりません。 クロムエクステンションには特別なパス動作があることがわかりました。
ここでは、そのクロムがここに余分に余分にあるパス/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でしか動作しないと仮定します。
誰かがこれを回避する方法を知っていれば、私は非常に感謝しています！
私にはわからないe.jsを使用していますが、Chromeを認識しており、組み込みのWebサーバーを持たないため、path： '/ index.html'のようなmanifest.jsonフォルダに対する拡張子の中で実際のhtmlファイルパスを使用する必要があります。 – wOxxOm
悲しいことに、それはうまくいきませんでした。私は '{path： 'index.html /'、component：App}、'成功しなかっただけです。 – xetra11
申し訳ありませんが、 '/ index.html'と打つことを意味しました。はい、index.htmlはマニフェストと同じルートにあります。私は質問にindex.htmlを追加しました – xetra11