小编Pau*_*lie的帖子

我有一个 Vue-cli 应用程序，我正在尝试将其转换为 vite。我正在使用 Docker 来运行服务器。我看了几个教程，并让 vite 在开发模式下运行，没有错误。但是，浏览器无法访问该端口。也就是说，当我在 macbook 的命令行上（在 Docker 之外）时，我不能curl这样做：

$ curl localhost:8080
curl: (52) Empty reply from server

如果我尝试 localhost:8081 我得到Failed to connect. 此外，如果我运行 webpack 开发服务器，它会正常工作，所以我知道我的容器的端口已公开。

另外，如果我在运行 vite 服务器的同一虚拟机中运行curl，它就会工作，所以我知道 vite 正在工作。

详细信息如下：

在 package.json 中：

...
"dev": "vue-cli-service serve",
"vite": "vite",
...

整个 vite.config.ts 文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    resolve: { alias: { '@': '/src' } },
    plugins: [vue()],
    server: {
        port: …

我想为每个页面将页面标题设置为不同的值。

在常规的 Vue.js 中，我做了以下事情：

import router from './router'
import { store } from './store/store';

router.beforeEach((to, from, next) => {
    store.mutations.setRoute(to);
    document.title = store.getters.pageTitle;
    next();
}

我如何在 nuxt 中获得这种效果？

也就是说，在初始页面加载和更改页面时，我希望浏览器选项卡的标题更改。例如，从“我的应用程序-关于”到“我的应用程序-个人资料”。

我启动了我的 vue/nuxt 应用程序：

npx create-nuxt-app 

我想在运行开发服务器时关闭热重载功能。我在任何地方都找不到执行此操作的选项。nuxt命令的帮助中有：

nuxt --help
    Description
      Starts the application in development mode (hot-code reloading, error
      reporting, etc)
    Usage
      $ nuxt dev <dir> -p <port number> -H <hostname>
    Options
      --port, -p          A port number on which to start the application
      --hostname, -H      Hostname on which to start the application
      --spa               Launch in SPA mode
      --universal         Launch in Universal mode (default)
      --config-file, -c   Path to Nuxt.js config file (default: nuxt.config.js)
      --help, -h          Displays this message

没有关闭热重载的开关。我认为文件中可能有nuxt.config.js，但我无法找到可能的选项。

我已经浏览了从此页面开始的文档： …

我有一个相当大的 Vue 项目，最初是使用 vue-cli 创建的。我在构建时收到臭名昭著的“无法满足块组所需的顺序”警告。经过多次搜索，我认为解决方案是添加ignoreOrder到初始配置选项，mini-css-extract-plugin但我不知道如何。我认为这应该在 中完成vue.config.js。该文件的内容是：

module.exports = {
  lintOnSave: false
}

我试过了：

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({ ignoreOrder: true })
    ]
  }
}

但这给了我一个错误，我认为这意味着模块被加载了两次。

我试过了：

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      ignoreOrder: true
    }
  }
}

但这给了我一个语法错误。

我如何设置该选项？

我使用创建了我的应用npx create-nuxt-app，然后添加了npm install @nuxtjs/pwa --save。我在index.html中加入了Google字体，其中包括：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" data-n-head="true">

通过在devtools /应用程序标签中点击“离线”复选框，然后重新加载，我在Chrome中以离线模式测试了我的应用程序。除字体外，所有内容均被缓存。

然后我添加：

workbox: {
    runtimeCaching: [
        {
            urlPattern: 'https://fonts.googleapis.com/.*',
            handler: 'cacheFirst',
            method: 'GET'
        },
    ]
}

到nuxt.config.js文件，但我无法缓存字体。我在urlPattern上尝试了多种变体。

Nuxt正在为我生成一个服务工作者，它看起来像这样：

importScripts('/_nuxt/workbox.3de3418b.js')

const workboxSW = new self.WorkboxSW({
  "cacheId": "my-app",
  "clientsClaim": true,
  "directoryIndex": "/"
})

workboxSW.precache([
  {
    "url": "/_nuxt/app.bb74329360a7ee70c2af.js",
    "revision": "8477c51cbf9d3188f34f1d61ec1ae6bc"
  },
  {
    "url": "/_nuxt/layouts/default.ce9446c7c3fffa50cfd2.js",
    "revision": "504d33b2d46614e60d919e01ec59bbc8"
  },
  {
    "url": "/_nuxt/manifest.912c22076a54259e047d.js",
    "revision": "a51a74b56987961c8d34afdcf4efa85c"
  },
  {
    "url": "/_nuxt/pages/index.6bfd6741c6dfd79fd94d.js",
    "revision": "1a80379a5d35d5d4084d4c2b85e1ee10"
  },
  {
    "url": "/_nuxt/vendor.f681eb653617896fcd64.js",
    "revision": "59c58901fd5142fdaac57cbee8c1aeb4"
  }
])


workboxSW.router.registerRoute(new …

对于每个版本的webpack，似乎此配置都已更改，并且使用vue-cli创建的项目更改了指定Webpack配置的方式。我已经尝试过在此站点上找到的所有解决方案，它们似乎都针对不同版本的webpack。

当我更改js文件时，我想完全关闭网页的自动重新加载。我真的不介意自己刷新一下，并且自动重装经常会遇到麻烦。

我使用以下命令创建了我的项目， npm install -g @vue/cli vue create my-project 并使用以下命令 启动了我的开发服务器： npm run serve 调用： vue-cli-service serve 看起来我应该能够在vue.config.js文件中传递某些内容，但是我不知道是什么。那里有一个部分configureWebpack，但是我尝试在其中放置各种解决方案，但是我的页面仍然不断刷新。

感谢您的指导！我很难找到与此有关的最新文档。

编辑：

我创建了一个新项目，并且具有以下vue.config.js文件：

module.exports = {
  lintOnSave: false
}

我从需要使用的说明中看到：

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        hotReload: false // disables Hot Reload
      }
    }
  ]
}

但是我不确定那会去哪里。我认为这是描述不同的配置文件。

另外，如果我没看错的话，那只会影响.vue文件。如果我更改.js文件怎么办？

我们的网站会执行一系列定时操作，最终让用户用麦克风录制一些内容。因为我们不想通过浏览器的“our-domain.com 想要访问麦克风 [取消] [允许]”消息来中断该过程，所以我们从一个调用开始，getUserMedia以便在用户第一次单击“时弹出”开始”。

这一切在大多数浏览器和设备上都能正常工作。但是，在 iOS 上的 Safari 上，似乎存在超时。如果网站开始录制之前的一系列操作很短（例如 30 秒），则一切正常。但是，如果这一系列操作较长（例如 90 秒），则会再次弹出权限对话框。

我有两个问题：

1）这种行为是否有记录在案？我似乎找不到任何相关信息。是否有设置超时或设备可以自由设置自己的超时？

2）您对如何处理此案有什么建议吗？我发生的两件事是

a) 每 20 秒 pinggetUserMedia一次，以防止超时或

b) 在流程开始时就开始录音，但只有在准备好后才开始保存录音。

第一个解决方案的问题是，某些浏览器有一个“记住此决定”复选框，如果未选中该复选框，则每次我 ping 时都会弹出窗口。

第二种解决方案的问题是，当录音开始时，红色麦克风会出现在浏览器中，因此用户认为我们已经开始录音。

我创建了一个非常简单的环境来试验 TypeScript 和 Webpack。我尽可能地遵循在线示例，但构建的输出包含() =>，它应该已更改为 ES5 语法。请注意，我没有使用 Babel - 据我所知，TypeScript 应该能够在没有它的情况下生成 ES5。

这是我的 package.json 的一部分：

  "devDependencies": {
    "ts-loader": "8.0.7",
    "typescript": "4.0.3",
    "webpack": "5.2.0",
    "webpack-cli": "4.1.0",
    "webpack-dev-server": "3.11.0"
  },
  "scripts": {
    "build": "webpack"
  },

这是我的 tsconfig.json：

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "es2020",
        "target": "ES5",
        "allowJs": true
    }
}

这是 webpack.config.js：

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ], …

我正在尝试将我的 Vue2/Webpack 应用程序转换为 Vue3/Vite。

在 Vue2/Webpack 中，这是有效的：

<div v-html="require('!!html-loader!../../assets/icons/' + this.icon + '.svg')"></div>

Html-loader 添加了：

"html-loader": "1.3.2",

在 Vue3/Vite 中，这会引发错误：ReferenceError: require is not defined

我已经四处寻找执行此操作的示例，但不知道如何在编译时不知道文件名的情况下执行此操作。那可能吗？

在使用包含身份验证的 firebase 的网站上，我正在实现“忘记密码”功能。

sendPasswordResetEmail()如果用户提供的电子邮件没有与其关联的帐户，则返回状态为 400。如果电子邮件确实有帐户，则返回 200。

这意味着攻击者可以不断猜测电子邮件，直到得到 200。然后他们就知道有效的电子邮件。然后他们就可以开始猜测它的密码。

有没有办法sendPasswordResetEmail()永远返回200？无论输入的电子邮件是好还是坏，我希望唯一的回复是“检查您的电子邮件中是否有重置链接”。如果电子邮件无效，那么 firebase 应该悄悄地不发送电子邮件。

或者是否有其他机制可以提高安全性？

我试图将WAV文件放入AudioBuffer中，以便对其进行操作。我之前已经从AudioBuffer创建了WAV文件，并且需要将Float32Array转换为包含Int16值的DataView。我使用了这个方便的功能：

function floatTo16BitPCM(output, offset, input){
    for (var i = 0; i < input.length; i++, offset+=2){
        var s = Math.max(-1, Math.min(1, input[i]));
        output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
    }
}

好吧，我现在需要做的就是扭转这种情况（从服务器加载WAV文件，因此我不再有原始数据了）。我无法弄清楚该函数中实际发生的情况或数据的转换方式。