小编ux.*_*eer的帖子

Vue 3.0（现在稳定）有一个未公开的功能Bundler Build Feature Flags：

从 3.0.0-rc.3 开始，esm-bundler 构建现在公开可以在编译时覆盖的全局功能标志：

VUE_OPTIONS_API（启用/禁用选项 API 支持，默认值：true）

VUE_PROD_DEVTOOLS（在生产中启用/禁用开发工具支持，默认值：false）

构建将在不配置这些标志的情况下工作，但是强烈建议正确配置它们以便在最终包中获得适当的 tree-shaking。要配置这些标志：

webpack：使用定义插件

汇总：使用@rollup/plugin-replace

Vite：默认配置，但可以使用定义选项覆盖

注意：替换值必须是布尔文字，不能是字符串，否则打包器/压缩器将无法正确评估条件。

如何使用 vue.config.js 和 Webpack 实际配置这个构建标志？

尝试过这种方式，但它似乎不会影响供应商捆绑包的大小，还是应该仅适用于生产版本（目前无法尝试，因为有一个 vue-loader 错误破坏了我的产品版本）？

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      // Define Bundler Build Feature Flags
      new webpack.DefinePlugin({
        // Drop Options API from bundle
        __VUE_OPTIONS_API__: false,
      }),
    },
  },
};

为什么ES 导入在vue.config.js文件中不起作用？

例如：

import * as path from 'path';
import * as pjson from './package.json';

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, '/src'), // Alias @ to /src folder for ES/TS imports
      },
    },
  },
  pwa: {
    name: pjson.title,
    assetsVersion: pjson.version,
  },
};

运行npm run lint命令后出错（使用 vue-cli-service）：

\vue.config.js:1
import * as path from 'path';

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12) …

我正在尝试在我的项目中实现 PDF.js，但它比预期的要困难。

目前，我可以在 div 内渲染整个 PDF，但无法渲染标准工具栏查看器；您可以在此演示页面顶部看到我想要的示例： https: //mozilla.github.io/pdf.js/web/viewer.html

我的 JS 代码现在看起来像这样：

var url = '/filemanager/example.pdf';
var pdfScale = 1;
PDFJS.workerSrc = '/js/pdfJs/build/pdf.worker.js';

function renderPDF(url, canvasContainer, options) {
    var options = options || { scale: pdfScale };

    function renderPage(page) {
        var viewport = page.getViewport(options.scale);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };

        canvas.height = viewport.height;
        canvas.width = viewport.width;
        canvasContainer.appendChild(canvas);

        page.render(renderContext);
    }

    function renderPages(pdfDoc) {
        for(var num = 1; num <= pdfDoc.numPages; num++) …

有没有办法向 Storybook 添加身份验证？我想在我的 Storybook 项目中使用身份验证（我首选的身份验证提供程序是Auth0）。

是否有任何附加组件可以帮助我解决这个问题？我相信这是一个常见的用例，应该已经构建了一些东西。

当使用Vue CLI v4.0.5创建一个新项目并检查TypeScript和Linter / Formatter的选项时，您将获得用于 linting 和格式化的预配置选项：

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)  

我想使用的Airbnb规则为ESLint用更漂亮（格式上保存），以打字稿解析器和Vue公司CLI V4。

这些配置也应该适用于 VS Code 的 Vetur 扩展。

如何配置这种工具组合？

请注意，这不是一个重复的问题。也有类似的问题，但没有针对 Vue CLI4、TypeScript、ESLint、Airbnb、Prettier 以及与 Vetur / VS Code 一起工作的这些确切要求。

编辑 2020/02 - 这个挑战的性质最近发生了很大变化，所以我打开并回答了另一个问题：如何在 VS Code 编辑器中使用 …

在使用 Vue 2 和 Vue CLI 时，以及现在启动新的 Vue 3.0 beta 项目时，这个问题多次让我感到困惑。

即使使用当前最新的 Vue CLI 版本 4.3.1，在选择 TypeScript 选项时，给出的样板代码也会将compilerOptions 目标设置为 中的esnexttsconfig.json。

虽然Vue 2 TypeScript 指南正在指导：

# Recommended Configuration
// tsconfig.json
{
  "compilerOptions": {
    // this aligns with Vue's browser support
    "target": "es5",
    // this enables stricter inference for data properties on `this`
    "strict": true,
    // if using webpack 2+ or rollup, to leverage tree shaking:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

目前Vue Next …

如何在动态路由导入中禁用rel="prefetch"？

我正在使用 @vue/cli 4.3.1 和 Webpack 4.43.0，尝试禁用预取：

在route.js中

const Registration = () => import(  /* webpackPrefetch: false */
    /* webpackChunkName: "registration" */ '../modules/Popup/Registration.vue')

尝试在 vue.config.js 中配置，但没有帮助

chainWebpack: config => {
  config.plugins.delete('prefetch')
  config.plugins.delete('prefetch-index') // or
  config.plugins.delete('preload')
}

但无论如何都有

<link rel="prefetch" ....>

网上有几个关于iOS 6如何为我们的开发人员引入痛苦的技术细节的讨论,当Safari的私有模式打开时,浏览器的LocalStorage不可写.

但是,您如何在现代Web应用程序中处理此问题？您是否只是通过模态窗口通知检测到此情况并通知用户您的Web应用程序无法使用,除非用户禁用Safari的私有模式？或者您是否实施了根本不使用LocalStorage的后备措施？如果是这样,那些措施是什么？

我latest在 ECR 任务定义中使用标记时遇到问题，其中image参数的值类似于XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/reponame/web:latest.

latest一旦在容器实例（注册到集群的 EC2 实例）上运行新的服务实例（任务），我希望此任务定义从 ECR 中提取带有标签的映像。

但是在我的情况下，当我远程连接到容器实例并列出 docker 镜像时，我可以看到它没有从 ECR 中提取最新版本的镜像。

最新标记在当前标记之后有两个发布版本，因为我更新了任务定义以使用latest显式定义版本标记的标记实例，即:v1.05.

我在这个集群上只有一个容器实例。

在我的过程中可能有一些怪癖，但这个问题主要是关于latest在这种情况下应该如何表现？

我的docker镜像构建和打标签、ECR推送、ECS任务定义更新、ECS服务更新流程：

# Build the image with multiple tags
docker build -t reponame/web:latest -t reponame/web:v1.05 .

# Tag the image with the ECR repo URI
docker tag ${imageId} XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/reponame/web

# Push both tags separately
docker push XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/reponame/web:v1.05
docker push XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/reponame/web:latest

# Run only if the definition file's contents has been updated
aws …

通过 Vue CLI 4 创建的 VueJS 项目，您可以在以下位置使用这个方便的预设配置 Babel babel.config.js：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
};

我正在尝试使用babel-plugin-transform-remove-consoleconsole.*从构建的 JS 文件中删除。

通过以下方式将插件安装为开发依赖项：npm i -D babel-plugin-transform-remove-console

然后修改babel.config.js：

module.exports = (api) => {
  var env = api.cache(() => process.env.NODE_ENV);
  var plugins = [];
  // Change to 'production' when configs are working
  if (env === 'development') {
    plugins.push(['transform-remove-console', { exclude: ['error', 'warn'] }]);
  }
  return {
    presets: ['@vue/cli-plugin-babel/preset'],
    // plugins,
    // Doesn't work even when always on? …