【发布时间】：2017-06-13 19:45:02
【问题描述】：
我用 Vue.js 开发了一个 chrome 扩展。在我想使用路由时工作正常。
在我拥有 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 扩展程序并开始测试它时，没有任何反应。 我发现 chrome 扩展有一些特殊的路径行为。
在这里你可以看到 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:// 协议网址。
如果有人知道如何解决这个问题，我将非常感激！
【问题讨论】：
-
我不知道 vue.js 但我知道 Chrome 并且它没有内置的 Web 服务器，因此您需要在扩展程序中使用相对于 manifest.json 文件夹的真实 html 文件路径喜欢
path: '/index.html'。 -
遗憾的是没有奏效。我也试过
{ path: 'index.html/', component: App },，但没有成功 -
对不起，我的意思是输入
/index.html- 是一个错字。是的 index.html 与清单位于同一根目录中。我将 index.html 添加到问题中
标签： javascript google-chrome-extension routing vue.js vue-router