标签: vue-cli

嗨,我使用Vue-cli webpack启动了一个项目我犯的错误是我没有启用测试

如何将karma + mocha添加到我的webpack vuejs2开发中是否可以重新初始化并包含测试？

I installed Anime.js with npm as a dependencie to my project. Now i have a java script file "animate" where I have my anime code. How to link my component with my animate file to make the magic happen ? thanks for reading.

my animate.js file

how I tried to link my animate file with my component

我将 VueJs 与 VueCli 一起使用，并且我想根据将传递给我的主 App 组件的启动的“源”参数加载 CSS 文件。

我想在索引文件中像这样初始化我的组件：Main.js：

import Vue from 'vue'
import App from './App'
import router from './router'
import VueLadda from 'vue-ladda'
import VueResource from 'vue-resource'
import VModal from 'vue-js-modal'
import BootstrapVue from 'bootstrap-vue'

Vue.use(VModal);
Vue.use(BootstrapVue);

Vue.use(VueResource);
Vue.config.productionTip = false
Vue.component('vue-ladda', VueLadda)

new Vue({
  el: '#app',
  props: ['source'],
  router,
  render: h => h(App)
})

这里是我的 App 组件（App.vue）

<script>
export default {
  name: 'App',
  props: ['source'],
  data: function () {
    return {
    }
  },
  mounted: function () …

vue-cli 3.0提供了一个页面配置来配置多页面模式.

https://cli.vuejs.org/config/#pages

我目前正试图让开发服务器使用HTML5历史模式,但到目前为止没有运气.

有没有人已经尝试过此功能并得到了一个有效的例子？

这里没有代码可供提供,因为这只是一个简单的问题.谁能告诉我如何在我的vue-cli 3项目中实现vue-material-design-icons包？我一直试图这样做没有任何好结果,我找不到任何关于它的教程.

提前致谢.

使用以下内容:

node 8.11.2
npm 6.3.0

然后我尝试安装Vue CLI(@ vue/cli @ 3.0.0):

npm i -g @vue/cli

但是当我运行以下命令时:

vue ui

我收到以下错误:

Error: Cannot find module 'core-js/modules/es7.object.entries'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Apps\caches\npm\node_modules\@vue\cli\node_modules\apollo-upload-server\lib\mi
ddleware.js:14:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

我想重命名由index.html生成的npm run build。我在webpack配置中找不到任何内容。

我还在vue.config.js这里创建了一个描述：https : //github.com/vuejs/vue-cli/tree/dev/docs/config

module.exports = {
  pages: {
    index: {
      filename: 'dapp.html',
    }
  }
};

但是输出文件仍然 index.html

我试图在云9上使用Vue CLI，并遵循所有安装指南，但我不是后端人员，因此我很难弄清为什么该页面在每个页面上都显示“无效的主机标头”。

这是我所做的：

• 创建了一个名为 practice
• 通过安装vue npm install vue
• 通过安装Vue CLI npm install @vue/cli
• 无论安装了什么npm install @vue-cli-service-global（对此表示满意）
• 创建了一个名为项目login-system通过vue create login-system
• 然 vue serve

当服务器在执行该命令后启动时，我转至http://practice-myusername.c9user.io:8080，其中仅显示“ Invalid Host header”（无效的主机头），服务器控制台或客户端控制台中没有错误。如果服务器无法启动，则默认情况下会显示一个页面，上面写着“没有应用程序正在运行...”。

转到http://practice-myusername.c9user.io或http://practice-myusername.c9user.io/anywhere或http://practice-myusername.c9user.io/aradfa99asd都产生相同的结果。

每当我通过最后一项运行服务器时，vue serveIDE中的“服务器”选项卡都会显示

您的服务器应用程序可能使用了错误的端口和IP。尝试传递$ PORT和$ IP正确启动您的应用程序。您可以在我们的文档中找到更多信息

我还没有发现该文档对解决我的问题很有用。

这是怎么回事？再说一次，我不知道任何后端的东西，所以详细的回答/答复将不胜感激。

编辑：

不断的挖掘表明我应该将其添加到我的webpack.config.js：

 devServer: {
    compress: true,
    disableHostCheck: true,
 }      

我知道Vue CLI构建在webpack之上，但是我在任何地方都找不到配置文件，并且创建一个配置文件似乎无济于事。我也遇到了一个解决方案，vue.config.js但我不知道如何在其中构造内容，也不知道将其放入哪个目录。

我正在将一个项目从旧版本的Webpack和Vue.js转移到Vue cli 3，该项目运行良好，但我在弄清楚如何使其他加载程序正常工作时遇到了麻烦。加载程序是“ webpack-modernizr-loader”，它加载modernizr并允许我检查用户的浏览器是否可以执行promise和其他现代JavaScript功能。

我的老人webpack.config.js看起来像这样：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
     ...
      {
        loader: 'webpack-modernizr-loader',
        options: {
          options: [
          ],
          'feature-detects': [
            'test/es6/promises',
            'test/audio/webaudio',
            'test/websockets'
          ]
        },
        test: /empty-alias-file\.js$/
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      modernizr$: path.resolve(__dirname, './empty-alias-file.js')
    }
  },
  ...
}

使用Vue cli 3，我有一个vue.congfig.js文件，不确定如何将以上内容转换为文件。到目前为止，我最近的尝试是这样的：

var path = require('path')

module.exports = { …

所以基本上我已经有很长时间了，以为我已解决了这个问题，但事实并非如此。

我从本指南开始开发网站，它帮助我使用vue-cli创建了PWA。

在向其中添加firebase身份验证时，我还使用了本指南将firebaseui添加到我的项目中。

它告诉我将此行添加到我的index.html

<link type="text/css" rel="stylesheet" href="node_modules/firebaseui/dist/firebaseui.css" />

不幸的是，这没有解决，我在Chrome控制台中收到了以下错误消息：

Refused to apply style from 'http://localhost:8080/node_modules/firebaseui/dist/firebaseui.css'
 because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

这是2个月前，在尝试找到临时解决方案之前，我尝试了很多方法来解决此问题：

当跟随指向CSS资源的链接时，我的浏览器中出现“无法获取/node_modules/firebaseui/dist/firebaseui.css”的提示，我认为本地服务器可能没有在提供此文件。

所以我进入了build / dev-server.js文件并添加了这一行：

app.use(express.static('node_modules'))

并将index.html中的链接更改为：

<link type="text/css" rel="stylesheet" href="/firebaseui/dist/firebaseui.css" />

现在，我的网站在运行“ npm run dev”时正确加载了所有firebaseui组件，但是现在在运行“ npm run build”时它仍然不执行此操作，因为我的服务器显示了以下内容：

"GET /firebaseui/dist/firebaseui.css" Error (404): "Not found"

我想这是有道理的，因为我之前写下来是因为我以前只更改了dev-server.js中的代码，而不更改了与构建/生产相关的文件中的代码

基本上，我正在寻求一种使用firebaseui.css的方法，而不必更改dev-server.js中的内容以使其在生产中正常工作，或者有人告诉我必须编辑的build目录中的其他文件这行得通。

在此先感谢您，如果您需要查看更多我的代码，请提出要求，我将更新此帖子！