位置重新加载使 webpack 开发服务器崩溃 - Vue 2答案

【问题标题】：Location reload crashes webpack dev server - Vue 2位置重新加载使 webpack 开发服务器崩溃 - Vue 2
【发布时间】：2020-01-29 22:44:55
【问题描述】：

我在我的主要组件 App.vue 中使用 Vue-CLI 工具：

// template code omitted for convenience
@Component
export default class App extends Vue {
  private mounted(): void {
    // checking app version
    const storage = window.localStorage

    this.$http.getVersion().then((resp: any) => {
      const version = resp.data.id

      if (storage.getItem('app_version') !== null && storage.getItem('app_version') != version) {
        window.location.reload(true)
        storage.setItem('app_version', version)
      }
    })
  }
}

此代码背后的逻辑是，当我将 Web 应用程序重新部署到服务器时，在客户端刷新浏览器。如果没有这个东西，用户必须手动刷新浏览器才能看到更改，这对用户来说很不方便。

this.$http - 是一个 axios 实例；

resp.data.id - 返回版本号；

这里的问题是，当我手动更改 localStorage（在浏览器中）中的版本，然后刷新浏览器时，我的 webpack 开发服务器因错误而崩溃：

"发球：vue-cli-service serve npm 错误！退出状态 1"

还检查了完整的调试日志：

11 silly lifecycle project@0.1.0~serve: Returned: code: 1  signal: null
12 info lifecycle project@0.1.0~serve: Failed to exec serve script
13 verbose stack Error: branchio@0.1.0 serve: `vue-cli-service serve`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/alexanderkim/.nvm/versions/node/v12.10.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:326:16)
13 verbose stack     at EventEmitter.emit (events.js:209:13)
13 verbose stack     at ChildProcess.<anonymous> (/Users/alexanderkim/.nvm/versions/node/v12.10.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:209:13)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
20 error code ELIFECYCLE
21 error errno 1

这可能是什么？

【问题讨论】：

也许在重新加载之前放storage.setItem('app_version', version)？

标签： typescript vue.js webpack

【解决方案1】：

重新加载的目的是在应用重新部署后清除浏览器缓存。

我用 nginx 缓存破坏修复了它：

location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate';
    expires 0;
}

Vue-CLI 3 默认对所有资产进行哈希处理，因此 index.html 对此负责。

【讨论】：