在Chrome擴展中使用VueRouter和Vue.js - 路徑段的問題

我使用Vue.js開發了一個Chrome擴展。工作正常，直到我想要使用路由時擊中該部分。在Chrome擴展中使用VueRouter和Vue.js - 路徑段的問題

在我的本地開發服務器在那裏我有本地主機：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：//協議網址起作用。

如果有人有一個想法如何解決這個問題，我會非常感謝！

來源

2017-06-13 xetra11

我不知道vu e.js，但我知道Chrome，它沒有內置的Web服務器，所以你需要在你的擴展中使用真正的HTML文件路徑相對於像'path：'/ index.html''這樣的manifest.json文件夾。 – wOxxOm

可悲的是沒有奏效。我試過'{path：'index.html /'，component：App}，'也沒有成功 – xetra11

對不起，我打算輸入'/ index.html' - 是一個錯字。是的，index.html與清單位於同一根。我將index.html添加到問題 – xetra11

-2

Chrome擴展程序必須符合CSP（內容安全策略），因此您不能使用Vue 2，因爲它基於eval（）。

您需要使用Vue公司和Vue的路由器版本1.0的CSP版本一起去：

Vue的1.0-CSP

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

Vue的路由器1.0

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

來源

2018-01-02 21:09:04 mad

這個答案是無關緊要的，而且完全錯誤。 -1 https://vuejs.org/v2/guide/installation.html#CSP-environments –

Vue 2也符合CSP，正如上面的評論所述。 –

在Chrome擴展中使用VueRouter和Vue.js - 路徑段的問題

回答

相關問題