1

我使用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擴展並開始測試它沒有任何反應。 我發現鉻擴展有一些特殊的路徑行爲。

enter image description here

在這裏你可以看到,鉻具有路徑/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://協議網址起作用。

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

+1

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

+0

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

+0

對不起,我打算輸入'/ 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

+2

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

+0

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