标签: vue-cli

我使用 @vue/cli 3 创建了一个项目，并尝试添加 autoOpenBrowser 选项并收到以下错误。那么，我认为这个选项不再可用？

错误 WebpackDevServerOptionsValidationError：配置对象无效。webpack-dev-server 已使用与 API 架构不匹配的配置对象进行初始化。- 配置具有未知属性“autoOpenBrowser”。这些属性有效： object { hot?, hotOnly?,lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, logLevel?, clientLogLevel?,overlay ?、进度?、密钥?、cert?、ca?、pfx?、pfxPassphrase?、requestCert?、inline?、disableHostCheck?、public?、https?、contentBase?、watchContentBase?、open?、useLocalIp?、openPage?、功能？、压缩？、代理？、historyApiFallback？、staticOptions？、设置？、之前？、之后？、统计？、记者？、logTime？、noInfo？、安静？、serverSideRender？、索引？、日志？、警告？}

module.exports = {
  devServer: {
    port: 4020,
    autoOpenBrowser: true
  }
}

我有一个聊天记录和一个存储所有历史记录的 JSON 文件。所有图像/视频/音频链接到 require(\'媒体路径\')。

然而，由于某种原因，当使用 vue-cli-service 或 vue-cli-service 构建时，webpack 会跳过我用于表情符号的图像，不将其包含在 dist 文件夹中，而是将其转换为 base64 字符串。

JSON 看起来像这样：

          { type: \'emoji\', author: `me`, data: { src: require(\'../../Media/img/smiling-face.png\') } },\n          { type: \'text\', author: `me`, data: { text: `Do you read me...`, meta: \'\xe2\x9c\x93\xe2\x9c\x93 Read\' } },\n          { type: \'image\', author: `support`, data: { src: require(\'../../Media/img/2.gif\'), meta: \'\xe2\x9c\x93\xe2\x9c\x93 Read\' } },\n          { type: \'image\', author: `me`, data: { src: require(\'../../Media/img/1.jpg\'), meta: \'\xe2\x9c\x93\xe2\x9c\x93 Read\' } },\n

由于某种原因，我的 Emoji 类型消息被转换为 base64，并且 …

我遇到的问题是，由 . 创建的生产版本npm run build与 . 提供的开发版本不同npm run serve。生产中生成的 CSS 与开发中生成的 CSS 不同。

背景

由于标准的变化，使用 Vuetify 框架开发的现有应用程序的某些部分需要迁移到 Quasar。Vuetify 首先使用安装vue-cli。类星体是后来使用添加的npm。应用程序处于多页面模式。

问题

通过查看页面时npm run serve，已迁移到Quasar的页面会正确显示。但是，当尝试通过 将其部署到生产中时npm run build，相同的页面会中断。页面中的所有间距和边距均已关闭。检查生成的 CSS 后，发现某些 CSS 类被覆盖为 Vuetify 的值。

我尝试将每个页面的块分开，但无济于事。

以下是我的片段vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/static/dist/' : '/',
  outputDir: '../flask/web/static/dist',

  transpileDependencies: ['quasar', 'vuetify'],

  pages: {
    dashboard: { // vuetify page, no problem.
      entry: 'src/pages/dashboard/index.js',
      template: 'public/index.html',
      filename: 'dashboard.html',
      title: 'Dashboard', …

这是我的vue.config.js文件：

module.exports = {
  configureWebpack: {
    externals: {
      "vue": "Vue",
      "core-js": "core-js",
    },
  },
};

通过此配置，vue.js (Vue) 库被排除，我可以从 CDN 链接它。

但core-js无论如何都已打包并且不被识别为外部库。

我的配置有什么问题吗？

当我运行npm run lint（从 package.json 调用"lint": "vue-cli-service lint"）时，我在 HTML 属性中得到以下更改：

-      :auth0Login="auth0Login"
+      :auth0login="auth0Login"

这破坏了代码，我不希望这种情况发生。我尝试了以下规则来防止它：

      "vue/camelcase": "off",
      "vue/name-property-casing": "off",
      "vue/custom-event-name-casing": "off",
      "vue/component-definition-name-casing": "off",
      "vue/prop-name-casing": "off",
      "vue/component-name-in-template-casing": "off",

这些都不起作用，这并不奇怪，因为它们都没有指定 HTML 属性。这是我能找到的所有与外壳有关的东西。

我知道 linting 并不是绝对必要的，而且开始感觉它产生的问题多于它解决的问题，但如果有人知道解决方案，我仍然想让这项工作发挥作用。

package.json 中 eslintConfig 的 Pastebin：https://pastebin.com/h52YxjRd

目前，我正在修改我构建的 chrome 扩展，以添加在 Vue 中开发的弹出页面。我正在使用本教程https://www.streaver.com/blog/posts/create-web-extension-vue.html。

每当我尝试该步骤时vue init kocal/vue-web-extension my-extension，都会出现以下错误：

vue-cli · ENOENT: no such file or directory, scandir '/Users/avidave/.vue-templates/kocal-vue-web-extension/template'

我已将我的 vue-cli 更新到最新版本，所以我不确定这到底意味着什么。我知道文件模板不存在，但我不确定在 kocal-vue-web-extension 中创建文件的正确方法是什么，或者是否需要这样做。

设置

我使用 vue-cli 创建了一个基本项目，在此期间我使用“手动选择功能”进行安装，其中我选择了以下内容（除了 linter 之外）：

• 选定的Babel、TypeScript、Vuex 和 Linter / Formatter
• 选择2.x
• 对类风格组件说不
• 是要与 TypeScript 一起使用 Babel（现代模式、自动检测的 polyfill、转译 JSX 所需）？

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

"compilerOptions": {
    ...
    "jsx": "preserve",
    ...
}

import Vue, { VNode } from 'vue';

declare global { …