标签: vue-cli

在尝试使用构建新的webpack项目时,我反复收到错误vue-cli.我正在关注最新版本(3.0.0-beta.11)上的文档,也尝试使用早期版本,而不是测试版.

当我运行yarn serve它时尝试启动开发服务器并构建项目但在此处失败:

error  in ./src/App.vue?vue&type=template&id=7ba5bd90

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at normalize (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:7051:13)
    at formatWithCursor (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:10370:12)
    at /Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:31115:15
    at Object.format (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:31134:12)
    at actuallyCompile (/Users/cory/Code/chickadee/my-project/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:93:29)
    at compileTemplate (/Users/cory/Code/chickadee/my-project/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:26:16)
    at Object.module.exports (/Users/cory/Code/chickadee/my-project/node_modules/vue-loader/lib/loaders/templateLoader.js:42:20)

 @ ./src/App.vue?vue&type=template&id=7ba5bd90 1:0-194 1:0-194
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js

关于我的设置

• 苹果系统
• 我正在运行节点v8.5.0
• 软件包已安装 yarn

我尝试过的事情

• 不同版本的vue-cli生成新项目.项目生成并安装模块.
• 尝试删除prettier模块,但似乎仍然出现错误.
• 尝试重新安装所有模块.

还有什么可以尝试通过此错误？

我已经使用 Vue-cli 3 创建了一个 Vue 应用程序，并且我一直在尝试将 FCM 合并到其中。但是，我已经研究了两天，但仍然无法使其正常工作。

首先，这是我的

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase- app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
var config = {
  messagingSenderId: "69625964474"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function (payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload)
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
      body: 'Background Message body.',
      icon: '/firebase-logo.png'
  }

  return self.registration.showNotification(notificationTitle, notificationOptions)
});

``

sorta 工作的一种解决方案是我将此文件移动到文件public夹中并App.vue使用

const registration = await navigator.serviceWorker.register(`${process.env.BASE_URL}firebase-messaging-sw.js`)
messaging.useServiceWorker(registration)

但是，那么我将有两个 service worker（另一个来自 Vue 本身）。

我尝试vue.config.js通过添加以下配置来修改而不是尝试使用 Workbox： …

我有一个新的基于vue-cli 3的项目,其中包含.graphql文件src/夹中的文件,例如:

#import "./track-list-fragment.graphql"

query ListTracks(
  $sortBy: String
  $order: String
  $limit: Int
  $nextToken: String
) {
  listTracks(
    sortBy: $sortBy
    order: $order
    limit: $limit
    nextToken: $nextToken
  ) {
    items {
      ...TrackListDetails
    }
    nextToken
  }
}

当我跑步时yarn serve,它抱怨没有GraphQL的加载器:

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #import "./track-list-fragment.graphql"
|
| query ListTracks(

但我确实vue.config.js正确设置了(我认为):

const webpack = require('webpack');
const path = require('path');

module.exports = …

我正在使用vue-cli通过以下命令构建我的库：

"build": "vue-cli-service build --target lib --name myLib ./src/component.vue"

构建后如何从dist文件夹导入组件？

如果我从导入path-to-myLib/src/component.vue，一切都很好！但是下面的代码不起作用：

// undefined
import { component } from 'path-to-myLib/dist/myLib.umd.js' 
// undefined
import myComponent'path-to-myLib/dist/myLib.umd.js' 
// result: https://i.stack.imgur.com/xHSzL.png
import * as myComponent'path-to-myLib/dist/myLib.umd.js'

我不明白问题是什么。

在转移到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, …

我试图在我的 html 标记中使用 env 变量根据我是处于生产模式还是开发模式来更改 env 变量。我将如何使用 webpack 来做到这一点，在我的 html 中访问我的 process.env.VUE_APP_MIXPANEL env 变量？

我是 Vue.js 的新手，我正在为这个简单的事情而苦苦挣扎。

我想在我的页面上放置一个 Vuetify 按钮并将其指向用户可以下载的文件。这href部分对我来说毫无用处。要下载的文件位于/assets文件夹中。

<v-btn 
   class="ma-2" 
   outlined 
   href="../assets/file.pdf" 
   target="_blank">
       Download PDF
</v-btn>

当我单击按钮时，它所做的只是将我指向一个不显示任何内容的新网址：

<v-btn 
   class="ma-2" 
   outlined 
   href="../assets/file.pdf" 
   target="_blank">
       Download PDF
</v-btn>

如果我将文件放入 /public 目录，结果相同。

谢谢你的帮助

当我尝试测试已安装方法的组件时，如下所示：

mounted(){
this.search()
}

methods:{
  async search(){
     try{
       await axios.something
       console.log("not executed only when shallowMount")
      }catch{}
  }
}

我检查它返回 Promise<pending> 没有等待。
我这样写了测试：

    wrapper = await shallowMount(Component, {
      localVue
    });
    await wrapper.vm.search()// this works perfectly

然而，只有shallowMount 显然跳过了等待的函数，而下一行则完美地工作。
我对这种行为一无所知。
我该如何修复它？

编辑：

我还使用 Mirage.js 进行模拟响应。

function deviceServer() {
  return createServer({
    environment: "test",
    serializers: {
      device: deviceListSerializer()
    },
    models: {
      device: Model
    },
    fixtures: {
      devices: devices
    },
    routes() {
      this.namespace = "/api/v1/";
      this.resource("device");
    },
    seeds(server) {
      server.loadFixtures("devices");
    }
  });
}

我在 vs code 中安装 npm 时遇到这个问题

我已删除节点模块文件夹并重新安装

我们正在将 Jest 引入现有项目。

不过，我写了一个示例测试代码。出现上述错误。

   ReferenceError: Vue is not defined

      1 | import User from "../components/modal/ad/AdAdd";
    > 2 | import { mount } from "@vue/test-utils";
        | ^
      3 |
      4 | describe("user component", () => {
      5 |   let wrapper;

我该如何解决这个问题？

   ReferenceError: Vue is not defined

      1 | import User from "../components/modal/ad/AdAdd";
    > 2 | import { mount } from "@vue/test-utils";
        | ^
      3 |
      4 | describe("user component", () => {
      5 |   let wrapper;

//User.test.js

import User from "../components/modal/ad/AdAdd"; …