标签: vue-cli-3

我使用vue-cli3在vuejs中创建了一个项目.它在Chrome浏览器上工作正常,但在IE-11版本的空白屏幕中显示以下链接中提到的错误:https://drive.google.com/file/d/1QaNwK1ekI2BwFsFyjvgbSsvwHBCmlcAD/view?usp=drivesdk On单击我在上面的屏幕截图中指出的控制台错误,它打开一个屏幕,显示在给定链接https://drive.google.com/file/d/1_QXVjcw3cmqeC70LfNyLcr__rnXVIZIh/view?usp=drivesdk中,并显示mini-toastr包中的错误:这是我的babel.config.js文件代码:

module.exports = {
  presets: [
   ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}

和.browserslistrc文件代码:

> 1%
last 2 versions
not ie <= 8

我没有得到我在做错的地方.我错过了什么？如果有人需要更多信息,请告诉我.谢谢!

我一直在尝试使用带有ASP.Net Core web的新Vue CLI 3创建一个新项目.我可以使用dotnet new创建一个漂亮的新空白Web项目,并且可以使用vue create创建一个新的Vue.js Hello World模板,但我不能让我的生活让他们一起工作.

编辑：这看起来像此未解决问题的重复。我是否将此标记为已回答或删除？

我正在Vue CLI 3应用程序内的workbox-webpack-plugin中使用InjectManifest。我要注入的自定义服务人员已经处理了Firebase Cloud Messaging（FCM）。我需要根据我的环境（本地，暂存和生产）来侦听来自不同发件人的消息。

理想情况下，service-worker.js将如下所示：

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

firebase.initializeApp({
    'messagingSenderId': process.env.VUE_APP_FCM_SENDER_ID
});

但是，webpack似乎未触及此代码，因为输出服务工作者仍在读取process.env.VUE_APP_FCM_SENDER_ID而不是硬编码的密钥。

如何通过webpack运行服务工作者，以解决环境变量？

我正在使用vue-cli3和npm开发单页应用程序。

问题：填充一个名为counter的基本整数值（以vuex状态存储），该值在后端到前端递增/递减，从而显示新值。

增量/减量突变在两个组件（前端/后端）上都可以正常工作，但似乎该突变不适用于同一路由实例：在后端中对计数器进行增减时，前端中的值不会更新否则。

store.js：

包含需要在后端/前端之间同步的状态。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 10
  },
  mutations: {
    increment (state) {
      state.counter++
    },
    decrement (state) {
      state.counter--
    }
  }
})

index.js：

定义vue-router必须提供的路由。

import Vue from 'vue'
import Router from 'vue-router'
import Frontend from '@/components/Frontend'
import Backend from '@/components/Backend'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Frontend',
      component: Frontend
    },
    {
      path: '/backend',
      name: 'Backend',
      component: …

Vuetify 2.0.0-beta.0刚刚发布，我想尝试一下并在新的vue测试应用程序中试用。但是，当我尝试将其安装在新的新项目中时出现错误。这是我已采取的步骤。

我使用@vue/cli v3.8.2默认设置创建一个新项目：

vue create testapp

这给了我成功的结果：

  Successfully created project testapp.
  Get started with the following commands:

 $ cd testapp
 $ npm run serve

然后，我将vuetify插件添加到具有默认（推荐）预设的项目中：

cd testapp
vue add vuetify

这给了我成功：

  Installing vue-cli-plugin-vuetify...

+ vue-cli-plugin-vuetify@0.5.0
added 1 package from 1 contributor and audited 23942 packages in 9.235s
found 0 vulnerabilities

?  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

  Invoking generator for vue-cli-plugin-vuetify...
  Installing additional dependencies...

added 11 packages from 49 contributors and audited 23980 …

我想看看结果变量的内容是什么。

const result = await axios.post('/login', {
    email: user.email,
    password: user.password
});
console.log(result);

在我运行“npm run serve”之后

我收到一个错误，无法编译使用控制台。

使用 vue-cli 时有没有办法使用控制台？

我有一个使用vue cli 3创建的项目。当我运行命令“ npm run serve”时，它会显示以下成功消息（我用假＃替换了我的IP地址）：

App running at:
- Local: http://localhost:8080/
- Network: http://1.2.3.4:8080/

在我自己的计算机上，一切正常。在我自己的计算机上，我既可以通过本地地址访问，也可以通过IP地址访问，但是无法使用连接到同一wifi网络的其他设备上的网络地址访问。

我尝试了以下方法：

On vue.config.js:
devServer: {
    host: '0.0.0.0'
}

and
devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false
}

on my package.json:
"scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

and
"scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0 --allowed-hosts 1.2.3.4",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

我的tomcat服务器运行在端口80上，并且在我的计算机和其他设备上都可以正常工作...

这是我遇到的错误页面： 如何做到这一点，以便可以从同一网络上的其他设备访问我的vue项目？

感谢您的时间和帮助！

我已经尝试了几个小时，以便为我的新vue（基于打字稿的）项目（由vue-cli v3生成）启动并运行伊斯坦布尔代码覆盖率报告。

每当我运行测试时：（nodemon --exec nyc vue-cli-service test:unit）仅包含.ts文件，即使我已明确设置nyc应包括这些文件：

Package.json

"nyc": {
    "check-coverage": true,
    "per-file": true,
    "lines": 80,
    "instrument": true,
    "sourceMap": true,
    "statements": 80,
    "functions": 80,
    "branches": 80,
    "include": [
        "apollo-server/**/*.{ts,vue}",
        "apollo-server/*.vue",
        "src/**/*.{ts,vue}",
        "src/*.vue"
    ],
    "exclude": [
    ],
    "reporter": [
        "lcov",
        "text",
        "text-summary"
    ],
    "extension": [
        ".ts",
        ".vue"
    ],
    "cache": true,
    "all": true
}

我也曾尝试设置nyc.instrument与nyc.sourceMap假以允许像这样的WebPack配置自定义加载器：

Vue.config.js

module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
    ? '/'
    : '/',
configureWebpack: config => {
    // if (process.env.NODE_ENV === "coverage") …

我知道SO 中的问题change-default-font-in-vuetify，但由于它是在vue-cli-3出来之前发布的，所以并没有解决我的问题，因此这里的想法不适用于那是，Vuetify的官方文档中关于如何更改主题和其他选项 的内容在使用vue-cli 3创建项目时没有任何有效步骤。

到目前为止，我的尝试是这样的：
-vue create fooproject（使用默认配置，但是即使我不使用默认配置，而是选择我想要的项目，并手动选择css-preprocessor作为手写笔，它也无法正常工作）
-vue添加vuetify-
创建一个插件目录：src / plugins，在其中存储vuetify.js-
在HelloWorld组件中添加v-btn只是为了知道字体是否有效
-然后我应该可以导入../手写笔/main.styl，我在其中：

@import '~vuetify/src/stylus/settings/_variables'
$body-font-family = 'Open Sans', sans-serif;
$heading-font-family = 'Montserrat', sans-serif;
@import '~vuetify/src/stylus/main'

我什至尝试使用@import'〜vuetify / src / stylus / main'，是否还必须添加其他手写笔加载程序依赖项或其他内容？因为这正是Vuetify网站上不推荐的内容。

错误日志：没有错误，我只是在材质按钮中继续使用Roboto字体

有什么意见吗？

其他尝试：我尝试遵循Jacob E. Dawson编写的步骤，但是可能缺少一些超级傻的东西。

我已经有这个问题近 2 天了，任何帮助都将是救命稻草。

我的 vue 应用程序在 8080 开发模式下运行，我正在尝试集成块堆栈登录，该应用程序尝试读取http://localhost/manifest.json，所以我将它放在静态目录中，但它抛出了 cors 错误，我们有像 vue.config.js 这样的 vue cli 配置的解决方案吗？