标签: vue-cli-3

我有一个由Vue cli 3生成的Vue项目,我的热重装突然停止在我的浏览器中工作.终端仍然会选择对代码所做的更改,但是,我的浏览器没有获取更改.我必须手动刷新才能获取新的更改.正如其他一些人所建议的那样,我手动设置poll: true了我vue.config.js,我也尝试设置代理,但都没有成功.

有什么建议让这个工作再次成功吗？

所以我有一个支持 v-for 和 v-if 的 div 元素，如果它工作正常并且输出是正确的，但是这个警告真的让我很恼火：

[vue/no-use-v-if-with-v-for] 'v-for' 指令中的 'prit_type_ids' 变量应该替换为返回过滤数组的计算属性。您不应将“v-for”与“v-if”混用。

有没有办法消除这个警告？我已经在我的 .eslintrc.js 中添加了这段代码

来源：https : //github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-use-v-if-with-v-for.md#wrench-options

我把它放在正确的地方了吗？或不。

rules: {
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"vue/no-use-v-if-with-v-for": ["error", {
    "allowUsingIterationVar": true
  }],
}

所以基本上，我有一个嵌套循环，其中第一个循环中的特定元素正在比较来自第二个循环的值，如果匹配，它将把来自第二个循环的数据放在第一个循环的相应列中.

这是代码：

    <div class="columns is-mobile" v-if="!loading">
      <div class="column" v-for="x in firstSection" v-bind:key="x[0]">
        <div class="box">
          <article class="media">
            <div class="media-content">
              <div class="content">
                <div class="tags has-addons">
                  <span class="tag is-medium">Version number: </span>
                  <span class="tag is-dark is-medium">{{ x[0] }}</span>
                </div>
                <div class="tags has-addons"> …

我尝试在vue-cli中使用环境变量,但是不起作用,每次使用时都说'undefined' console.log(process.env.VUE_APP_BASE_URI).但是process.env.NODE_ENV我在webpack.config.js中定义了'开发'.

我阅读了vue-cli 3的文档,并将我的.env.*文件放在根项目中.像这样:

Webpack.config.js

    module.exports = {
  mode: 'development',
  context: __dirname,
  entry: {
    main: ['babel-polyfill', './App/index.js']
  },
  plugins:[
    new VueLoaderPlugin()
  ],

.env.development

VUE_APP_BASE_URI=http://localhost:64208/api/

.env.production

VUE_APP_BASE_URI=http://localhost:64208/api/

我使用带有Vue的.NET Core.如何使用环境？

我在使用VueCLI 3附带的默认服务工作程序缓存文件时遇到一些问题.我更喜欢使用默认的浏览器缓存机制,但似乎无法禁用PWA插件,因为它不在vue.config.js文件中.将空白对象传递给该pwa选项不起作用,因为该对象已合并但未被覆盖.

当前，在使用Vue CLI 3生成项目后，标题为“ Vue App”。

如果我通过document.title在创建的挂钩中设置了标题，那么在显示通过document.title设置的标题之前，浏览器仍将闪烁“ Vue App”。

寻找一种为Vue CLI 3生成的项目设置HTML标题的方法，而无需先闪烁默认的“ Vue App”标题。

我有一个@vue/cli-plugin-pwa安装并配置了插件的 Vue Cli 3 项目（在 中vue.config.js），但是当我运行时，vue-cli-service build --modern没有manifest.json根据我的配置生成。

我期待看到manifest.json至少包含我指定的图标路径的 。也许还有我放在vue.config.js.

我做错了什么，或者我对插件应该如何工作的期望与实际行为不符？

我应该如何让 Vue 生成我的manifest.json?

我已经安装了项目，vue cli 3但随着项目的增长，组件的导入变得越来越难看，我最终导入了一个组件

import Component from '../../../../components/folder/Component.vue'

我只想给 src 文件夹取别名然后做

import Component from '@components/folder/Component.vue'

我确实读到我必须修改 vue.config.js，我已经完成了但错误是一样的

Module not found: Error: Can't resolve '@components/Permissions/PermissionsTable'

这是我的 vue.config.js

  const path = require("path");

  const vueSrc = "./src";

  module.exports = {
    runtimeCompiler: true,
    css: {
      modules: true
    },
    configureWebpack: {
      resolve: {
        alias: {
          "@": path.join(__dirname, vueSrc)
        }
      }
    }
  };

我错过了什么吗？我还应该做什么？

在转移到vue-cli 3时,我遇到了以下问题.我将插件的CSS导入我的app.scss.

这一行:background-image: url(default-skin.svg);break yarn build,抛出此错误:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: navigator is not defined

这是我的vue.config.js:

const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')

const ASSETS_DIR = 'static'

module.exports = {
  assetsDir: ASSETS_DIR,
  runtimeCompiler: true,
  chainWebpack: config => {
    config
      .plugin('provide-plugin')
        .use(webpack.ProvidePlugin, [{
          axios: "axios",
          $: "jquery",
          jQuery: "jquery",
          _: "lodash",
          mapGetters: ['vuex', 'mapGetters'],
          mapActions: ['vuex', 'mapActions']
        }])
        .end()
      .plugin('copy-plugin')
        .use(CopyWebpackPlugin, [
          [{
            from: path.resolve(__dirname, 'static'),
            to: ASSETS_DIR, …

我有使用vue cli 3的vue应用程序。在设置过程中，我选择了jest作为测试框架。为了运行我的单元测试，我在package.json中有一个脚本：

test:unit": "vue-cli-service test:unit",

并运行它，我在vs代码终端中编写：

npm run test:unit

这将运行我所有符合package.json文件的jest config部分中设置的规范的测试。

我的问题是如何仅运行一个测试。我需要运行特定的命令吗？或者是否有适用于此设置的vscode扩展名。

我有一个使用 vue-cli 3 创建和构建的 vue.js 应用程序。我有一些环境变量.env.test和.env.prod文件。

要构建应用程序，我使用了一个 azure devops 构建管道，我在其中运行命令： npm run build:test或 npmrun build:prod

这会生成不同的工件，这些工件是在 azure devops 发布管道中为 Stage 输入的。

我面临的问题是我不想为每个环境单独构建。我想构建一个并部署到不同的环境，这可能吗？

我如何处理这些变量来为所有环境构建一次包？这是一个好习惯吗？或者我应该像现在一样为不同的环境使用不同的管道？