如果在非root用户中路由，Browsersync会在SPA中导致“拒绝执行内联脚本...”错误

Question

我的Vue SPA中出现以下错误：

Refused to execute inline script because it violates the following Content Security 
Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, 
a hash ('sha256-KpHv3zgivMSB4dPnfYfqMt2lBibsYvM36EdoBBAsfbM='), or a nonce ('nonce-...') 
is required to enable inline execution. Note also that 'script-src' was not explicitly set, 
so 'default-src' is used as a fallback.

此错误由Browsersync引起：

首先，仅当浏览器已通过非根路径的browsersync重新加载浏览器时，才会发生此错误。例如，此错误发生在http://localhost:3001/sign-in中，但从未发生在http://localhost:3001中。

接下来，仅在SPA中会发生此错误，而在普通网站中则不会发生此错误（多个页面，没有使用HTML5历史记录的操作）。因此，我想涉及了vue-router。

Answer 1

我对原因的假设是 BrowserSync 是错误的。原因是我过去不理解前端路由是如何工作的。让我们看看 vue-router 的 history mode 中发生了什么：

1. 构建完成后，浏览器中带有“/”路径的新标签页将打开。
2. Vue-router 生成包含 /sign-in 的路由。
3. 当我们进入非根页面时，e. G。 http://localhost:3000/sign-in
4. 如果我们对代码进行更正，将重新构建项目。
5. 浏览器同步将重新加载页面 http://localhost:3000/sign-in。但是浏览器同步不知道他必须为 http://localhost:3000/sign-in 路由返回什么！它是静态服务器，它只知道 http://localhost:3000/ 并且可以返回与 http://localhost:3000 对应的目录相关的文件。没有文件sign-in，所以会出错。

在路由初始化期间，sign-in 在 vue-router 页面中创建了类似 http://localhost:3000/ 的路由，但这些数据将在下次浏览器重新加载时丢失。

解决方案

我确信存在 10 多种方法（针对各种项目构建工具），但我对本地开发模式下的哈希模式感到满意。要在生产和/或测试模式下启用历史模式，appropriate server setup required。很可能可以将浏览器同步设置为重定向，如 http://localhost:3000/sign_in => http://localhost:3000/。

我不使用 create-vue-app 之类的工具，但我认为 Webpack 以某种方式预先设置以避免上述问题（Webpack hot module replacement？）。