标签: vue-cli

我正在构建一个 Vue 应用程序，并且想要在一个构建案例中构建时覆盖一些环境变量，因此我创建了一个自定义mode并执行了一个命令，package.json如下所示：

vue-cli-service build --mode myMode --modern

并将我想要的环境变量放入为此模式指定的文件中：

// file name: .env.myMode
VUE_APP_MY_VAR=123

现在，如何在production自定义模式下使用相同的构建步骤进行构建？因为当我使用前面的命令构建时，它不会破坏或压缩 js 文件。

我正在尝试运行一个基本的 Nuxt 应用程序，其中包含使用 lerna monorepo 内的 vue-cli 构建的外部 Vue 组件。

该页面简要显示组件内容（服务器呈现），然后消失并抛出以下错误。

"export \'default\' (imported as \'Header\') was not found in \'a2b-header\'

其次是

Mismatching childNodes vs. VNodes: NodeList(7)\xc2\xa0[svg, text, div#app, text, h2.subtitle, text, div.links] (7)\xc2\xa0[VNode, VNode, VNode, VNode, VNode, VNode, VNode]

最后是红色的 Vue 警告

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. …

我在构建后渲染 VueJS 应用程序时遇到问题。当我查看构建文件夹并检查路径时，我的资产、css 和 javascript 的路径开头有一个正斜杠。这使得我的 css、资源和 javascript 无法找到。我想知道在运行构建脚本之前如何避免这个问题。谢谢。这是我的代码：

应用程序.vue

<template>
  <div id="app">
    <BaseTimer />
    <!-- <PomodoroTimer /> -->
  </div>
</template>

<script>
import BaseTimer from "./components/BaseTimer";
// import PomodoroTimer from "./components/PomodoroTimer";

export default {
  name: "App",

  components: {
    BaseTimer
    // PomodoroTimer
  }
};
</script>

<style>
body {
  background-color: #fff;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
</style>

BaseTimer.vue（在组件文件夹内 …

我正在尝试运行简单的vue项目。但是，不知何故，我无法在我的openSUSE TW (20200615) 系统上运行它。我正在使用 NVM 进行节点安装。以下是我的环境

 nvm --version  # 0.35.3
 node --version # v14.4.0
 npm --version # 6.14.5
 vue --version # @vue/cli 4.4.4

我正在遵循典型的 hello world 教程

vue create hello-world  
cd hello-world
npm run serve

我收到以下错误

> hello-world@0.1.0 serve /path/to/hello-world
> vue-cli-service serve

sh: /path/to/hello-world/node_modules/.bin/vue-cli-service: Permission denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! hello-world@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 126
npm ERR! 
npm ERR! Failed at the hello-world@0.1.0 serve script.
npm …

我一直在使用 Vue3.js 和 Vue Cli 开发我的第一个项目，在过去的几个小时里我一直被这段代码困住了。

基本上我想要做的是根据代码的 setup() 部分中创建的对象数组创建一个按钮列表。所有对象还在数组本身中包含自己的引用，我最终将其绑定在模板上。然后，我从每个引用中创建常量，以便我可以在 setup() 中使用它们，但是当我 console.log(btnConvert.value) 时，我得到一个代理，而我的其他引用则没有代理在 v-for 循环内。

    RefImpl\xc2\xa0{_rawValue: Proxy, _shallow: false, __v_isRef: true, _value: Proxy}\n

这是 console.log(btnConvert.value) 的扩展版本

Proxy {\xe2\x80\xa6}\n  [[Handler]]: Object\n    get: \xc6\x92 get({ _: instance }, key)\n    has: \xc6\x92 has({ _: { data, setupState, accessCache, ctx, appContext, propsOptions } }, key)\n    ownKeys: (target) => {\xe2\x80\xa6}\n    set: \xc6\x92 set({ _: instance }, key, value)\n  [[Prototype]]: Object\n  [[Target]]: Object\n  [[IsRevoked]]: false\n

我尝试了我能想到的一切，但我无法理解官方 Vue 文档。\n有人可以帮助我理解如何使用这些引用检索 DOM 元素吗？\n非常感谢！

基本上我想要实现的目标是让我的应用程序运行在local.myapp.com而不是localhost.

注意：在主机内部，/etc/hosts我有127.0.0.1 local.myapp.com条目，并且我的 docker-compose 配置有ports: 80:80.

当我在主机上运行此命令时：yarn serve --port=80 --host=local.myapp.com一切正常，我可以通过 访问我的 Vue 应用程序local.myapp.com。但是我无法使用 Docker 以相同的方式配置它。

以下所有命令都在 docker 容器中运行：

输入http://local.myapp.com/-yarn serve --port=80给我无效的主机标头

输入http://local.myapp.com/-yarn serve --port=80 --host=local.myapp.com给我ERR_EMPTY_RESPONSE。

在容器内部进行wget http://local.myapp.com:80工作。

我缺少什么？

我有这个规则，使用vue inspect

      /* config.module.rule('svg') */
          {
            test: /\.(svg)(\?.*)?$/,
            type: 'asset/resource',
            generator: {
              filename: 'img/[name][ext]'
            }
          },

我需要将文件名更改为“[contenthash][ext]”，但我无法使用

    module.exports = defineConfig({
    chainWebpack: (config) => {
    config.module.rule("svg").generator.filename = "[contenthash][ext]";
      },
    }) 

因为我无法设置发电机，

我可以使用重写所有规则

    module.exports = defineConfig({
    configureWebpack: (config) => {
    config.module.rules = [
          {
            test: /\.(svg)(\?.*)?$/,
            use: [
              {
                loader: "svg-inline-loader",
                options: {
                  name: "[contenthash].[ext]",
                },
              },
            ],
          },
        ];
    },
  })

但我需要存在其他规则...那么如何更改 svg 的文件名？

我最近从 vue-cli 4.5.x 迁移到 5.0.x。

自从这次升级以来，服务器发送事件 (SSE) 似乎不再与 WebPack 开发服务器一起使用。
（我目前使用的是vue-sse）

请注意，在生产中它工作得很好。

我的 devServer 配置如下所示：

  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        ws: true,
        changeOrigin: true,
      },
    },
  },

使用 Vue-CLI，我能够生成一份报告来分析包内容，如下所示：

`npm run build -- --report`

我现在正在切换到 Vite，我想知道是否有类似的命令可以创建相同的报告。

我试图弄清楚如何将用vue-cli 3生成的vue应用程序部署到生产环境中。我计划将其托管为静态文件（这不是服务器端代码）。我需要根据当前环境（开发与生产）在代码中设置某些变量。这些包括api-url和身份验证信息（都不是秘密的）。

最好的方法是什么？

这是vue-cli 3的配置文档：https : //cli.vuejs.org/config/