标签: 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模块,但似乎仍然出现错误.
• 尝试重新安装所有模块.

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

Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core' in '/project/src/plugins'

一直在尝试跟进本教程 ( https://blog.logrocket.com/full-guide-to-using-font-awesome-icons-in-vue-js-apps-5574c74d9b2d/ ) 以升级我当前的 fontawesome (4.0 .7) 到我项目的最新 5.0.12 版本，但不断收到此错误，很明显该项目没有找到 lib。

我用了

npm install --save @fortawesome/fontawesome-svg-core 
npm install --save @fortawesome/free-solid-svg-icons 
npm install --save @fortawesome/vue-fontawesome

src/plugins/font-awesome.js

import Vue from 'vue'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

Vue.component('font-awesome-icon', FontAwesomeIcon)

主文件

/* ============
 * Main File
 * ============
 *
 * Will initialize the application.
 */

import Vue from 'vue';

/* …

vue app在里面: C:\xampp\htdocs\booking

Laravel api在里面: C:\xampp\htdocs\booking-api

仅供参考:vue app正在开发http:// localhost:8080

如果文件夹结构如上所述,那么app工作正常我可以像这样调用api,

axios.get('http://localhost/booking-api/public/Rooms').then((response)=>this.items = response.data);

但我想要booking-api文件夹内的booking文件夹.如果我放置它,如果我打电话给api如下,

axios.get('/booking-api/public/Rooms').then((response)=>this.items = response.data);

它不会工作,控制台窗口是这样的,

Request URL:http://localhost:8080/booking-api/public/Rooms
Request Method:GET
Status Code:404 Not Found

那么,我如何api在vueapp中放置项目以及如何从vue调用api.

我最近更新了laster版本vue-cli 3

创建项目并运行它后,它将显示该消息

• 您可以使用特殊注释来禁用某些警告.
• 使用//eslint-disable-next-line忽略下一行.
• 使用/* eslint-disable */忽略文件中的所有警告.

但是我应该在哪个文件中添加这些评论？

我的根文件夹上只有一个package.json/package-lock.json和.gitignore

我是否必须创建.eslintrc？

我正在使用 Vue 和 webpack，有一个环境变量告诉 webpack 为生产或开发而构建。

这是有效的：

NODE_ENV=production webpack

console.log(process.env)

但是，本文档解释了您可以.env根据生产或开发模式使用不同的文件来更改应用程序中的变量。

.env文件

VUE_APP_ROOT=http://localhost:8000/
VUE_APP_BASE_URL=http://localhost:8000/api/

.env.prod文件

VUE_APP_ROOT=http://realaddress/
VUE_APP_BASE_URL=http://realaddress/api/

但我不清楚如何访问这些 .env 文件？显然这在您使用时有效vue-cli，但在我的应用程序中，此日志未定义：

console.log("environment variables")
console.log(process.env.VUE_APP_ROOT)
console.log(process.env.VUE_APP_BASE_URL)

如何.env根据生产模式访问不同的文件，没有vue-cli?

我正在使用 Vue CLI 开发应用程序。此应用程序是一个 Web 界面，必须与板上的 Rest API 进行通信。

所以，因为董事会会移动，董事会的 IP 会随着时间的推移而改变，这取决于我在哪里。

这是我的项目当前树：

IP 配置包含在 Settings.js 文件中：

export const Settings = {
    // Server configuration
    SERVER_IP: '127.0.0.1',
    SERVER_PORT: '9000',

    SERVER_PROTOCOL: 'http', // http or https

    // Website configuration
    DEBUG_MODE: true
};

在我的文件中，我使用以下语句导入此 IP：

import {Settings} from '../../Settings'
const ip = Settings.SERVER_IP;

// Do stuff

这工作正常。但问题是：当 IP 改变时，我必须重新编译所有内容。因为 Settings.js 是和其他 JS 文件一起编译的。

所以，我想知道是否有办法让配置文件保留在 dist/ 目录中，并在执行期间由我的 JS 应用程序读取。因此，每次我的应用程序服务器 IP 更改时，我都不必重新编译所有内容。

泰为您提供帮助:)

我正在使用 Vue cli3，并且想忽略带有 webpack 的 moment.js 插件。这是规则，但在 vue.confing.js 上，无论我如何更改它都会出错。

  plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ], 

好的，所以我是 Vue 的新手（基本上，一般来说是 JS 的新手，但我现在正在使用 Vue），我想做的是在模板标签内自动隐藏一个元素（不是点击）的一个组件。在 jQuery 中，这看起来像：

$(function() {
    setTimeout(function() {
        $(".hideElement").hide()
    }, 1000);
});

但这在 Vue 中是如何工作的？我的组件如下所示：

<template>
<div>
 <h1 class="hideElement"> HELLO </h1>
</div>
</template>

<script> // nothing here 
</script>

<style> // nothing here
</style>

我知道如何在单击按钮时切换元素，但我只想在 1 秒后自动隐藏它，每次用户进入此组件（这是一个新的“页面”）时没有任何单击事件

我使用 vue ui 创建了一个项目。当我单击服务按钮时，它以错误结束。我无法打开我创建的应用程序。错误是：

Couldn't parse bundle asset "{path}\dist\js\chunk-vendors.js".
Analyzer will use module sizes from stats file.

Webpack 配置是 Vue CLI 设置的一部分（可以使用 进行检查vue inspect）。这是其中的一个相关部分：

  entry: {
    foo: [
      '.../src/foo.js'
    ],
    barWidget: [
      '.../src/barWidget.js'
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    },
    ...

而 HTML 输出是：

<script type="text/javascript" src="/assets/js/chunk-vendors.[HASH].js"></script>
<script type="text/javascript" src="/assets/js/foo.[HASH].js"></script>

和

<script type="text/javascript" src="/assets/js/chunk-vendors.[HASH].js"></script>
<script type="text/javascript" src="/assets/js/barWidget.[HASH].js"></script>

foo根据需要拥有尽可能多的脚本标签没有问题，但barWidget小部件入口点应该立即加载，没有初始块依赖性。我的目的是barWidget加载一行代码（为此可能会禁用散列）：

<script type="text/javascript" src="/assets/js/barWidget.js"></script>

但在当前状态下，如果chunk-vendors …