标签: vue-cli

我使用的是最新vue-cli 版本3.0。

我当前的问题是，每当我运行npm run build该文件dist夹中生成的文件时，如果没有服务器就无法运行该文件。

我希望能够在浏览器上打开index.html文件。我该怎么做呢？

我正在尝试在我的vue-cli-3项目中包含一个cdn外部css文件,所以我在文件中添加了css文件,public/index.html如下所示:

<link rel="stylesheet" href="http://mycssfile.css">

但是css不包含在生成的index.html文件中.这曾经在vuejs2中工作,我不明白为什么它不适用于vuejs3.知道问题是什么吗？谢谢

有人成功使用VueJS，PostCss和Tailwind在Storybook中进行组件开发来建立项目吗？

我已经走了这么远：

1. 新vue项目（vue-cli 3.0.5）
2. @ storybook / vue（4.0.0-alpha.25）
3. tailwindcss（0.6.5）
4. 使用创建组件 <style lang="postcss"> ... </style>
5. @apply在样式块内使用Tailwind 将实用程序类应用于组件

我遇到的问题是，lang="postcss"运行故事书时，在编译过程中我创建的要使用的故事的任何组件都会失败。

我尝试添加一个自定义webpack配置来停止错误，但我的所有组件均未设置样式。

const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.postcss$/,
                loaders: ["style-loader", "css-loader", "postcss-loader"],
                include: path.resolve(__dirname, '../')
            }
        ]
    }
}

我也尝试将我app.postcss的stories.js文件（导入顺风）导入文件本身无济于事。任何帮助，将不胜感激。

我在Vue中很新，也许我的问题很琐碎。

我要做的是：

我想创建一个Vue组件，可以将其放入NPM专用存储库中，然后使用bundle.js文件之类的东西将其导入其他项目中

TLDR：

无法通过vue-cli-service build --target lib / wc导入vue组件构建。导入组件我有silimar"export 'HelloWorld' was not found in '../node_modules/hello-world'

长版：

我已尽可能地提出问题和项目。所有项目均由vue-cli构建，没有任何其他更改。

• 1. 创建新的默认项目 vue create hello-world
• 2. 默认情况下，我们在这里有第一个组件- src/component/HelloWorld，对于本示例，这是我们要导出的组件
• 3. 使用vue-cli-service尝试制作可导出文件。

• 3a。vue-cli-service build --target lib --name vue-test ./src/components/index.jsindex.js在哪里

  import Vue from 'vue';
  import HelloWorld from './HelloWorld.vue';
  
  const Components = {
      HelloWorld,
  };
  
  Object.keys(Components).forEach((name) => {
      Vue.component(name, Components[name]);
  });
  
  export default Components;
  

  Run Code Online (Sandbox Code Playgroud)

• 3b。或直接查看文件vue-cli-service build --target wc --name vue-test 'src/components/HelloWorld.vue'

在两种情况下都会将vue-cli-service我的文件生成到/dist文件夹中，我想相信此文件是正确的

在两种情况下，我都无法使用import {HelloWorld} from 'path/to/folder/or/file';或将组件导入到另一个vue项目 …

当我vue-cli-service test:e2e --headless在注册请求回调中运行 Cypress 并进行一些测试时失败：

而通常在浏览器 ( vue-cli-service test:e2e) 中运行时，它们会传递：

 it('Submit WITHOUT promo code', () => {
        cy.server();
        cy.route({method: 'POST', url: 'api/register'}).as('register');

        cy.get('.thz-items-loading').should('not.be.visible');
        cy.get('#btn-submit').should('not.be.disabled');

        cy.get('iframe[name^="__privateStripeFrame"]').then(($iframe) => {
            const $body = $iframe.contents().find('body');

            cy.wrap($body).find('input:eq(1)').click({force: true}).clear();
            cy.wrap($body).find('input:eq(1)').type('4000000000009979'); // stolen card
            cy.get('#btn-submit').click(); // SUBMIT FORM

            cy.wait('@register').then(xhr => {
                cy.contains('#card-errors', 'Your card was declined.');
                // cy.get('.thz-items-loading').should('not.be.visible'); // FAILS
                // cy.get('.thz-items-loading').to.have.style('display', 'none'); // FAILS
                cy.get('#btn-submit').should('not.be.disabled'); // FAILS
                (...)
            });

            return null;
        });
(...)

堆栈跟踪：

1) 试用注册表提交，无需促销代码：CypressError: Timed out retrying: E​​xpected <button#btn-submit.thz-button.thz-radius-50.thz-btn-border-2.thz-align-center.thz-ff-g-hind-vadodara-600>not be …

我正在尝试将stylelint集成到我新创建的 Vue 项目中。

我认为这将是使用Stylelint Webpack 插件的一个简单案例，但是当我运行时yarn serve，任何错误都会完全冻结它而没有输出。如果我运行yarn build，构建将按预期失败，但只会打印"There was a stylelint error"。

我vue.config.js的如下：

const stylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new stylelintPlugin({ files: ['**/*.(vue|scss)'] }),
    ],
  },
};

这是我当前的版本package.json：

 "@vue/cli-service": "^3.9.0",
 "stylelint": "^10.1.0",
 "stylelint-config-recommended": "^2.2.0",
 "stylelint-scss": "^3.9.2",

我在我的 Mac 上安装了 @vue/cli，但是每当我输入“vue”时，我的终端都会说“zsh: command not found: vue”——我该如何解决这个问题？搜索了类似的问题，已经花了半天时间，还是没有解决...

这是我的环境：

• macOS Catalina 版本 10.15
• npm 6.4.1
• 节点 v10.13.0

我这样做改变了 $PATH ：

echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.zshrc

现在这是：

echo $PATH
/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/Library/Apple/bin:/usr/local/share/dotnet:/opt/X11/bin:~/.dotnet/tools:/Library/Frameworks/Mono.framework/Versions/Current/Commands

貌似安装了@vue/cli，但是不知道为什么找不到vue命令。我没有管理员权限吗？

~ % npm install -g @vue/cli
/Users/ami/.npm_global/bin/vue -> /Users/ami/.npm_global/lib/node_modules/@vue/cli/bin/vue.js
+ @vue/cli@4.0.5
updated 1 package in 46.758s
~ % node -v
v10.13.0
~ % npm -v
6.4.1
~ % vue -v    
zsh: command not found: vue
~ % vue create new-project
zsh: command not found: vue

我正在遵循 Vue CLI 的说明，所以结果应该是创建一个新的 vue …

当我使用 vue-cli@3

npm run build

系统提示生成此错误 No module factory available for dependency type: CssDependency

我搜索了很多相关的问题，但它们都是有角度的？我也尝试过

1. rm -r node_modules
2. rm 包-lock.json
3. 我的

但是还是出现这个错误，我想知道我该如何解决这个问题

这是我的错误的详细信息

ERROR  Error: No module factory available for dependency type: CssDependency
Error: No module factory available for dependency type: CssDependency
    at addDependency (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:800:12)
    at iterationOfArrayCallback (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:208:3)
    at addDependenciesBlock (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:816:5)
    at Compilation.processModuleDependencies (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:827:4)
    at afterBuild (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:954:15)
    at buildModule.err (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:998:11)
    at callback (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:734:5)
    at module.build.error (E:\Games\hitokoto\node_modules\webpack\lib\Compilation.js:782:12)
    at handleParseResult (E:\Games\hitokoto\node_modules\webpack\lib\NormalModule.js:478:12)
    at doBuild.err (E:\Games\hitokoto\node_modules\webpack\lib\NormalModule.js:500:6)
    at runLoaders (E:\Games\hitokoto\node_modules\webpack\lib\NormalModule.js:358:12)
    at E:\Games\hitokoto\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (E:\Games\hitokoto\node_modules\loader-runner\lib\LoaderRunner.js:214:10) …

我需要配置最终构建的输出路径,如下所述:

我的Vue项目默认来自结构,但输出路径在此结构之外:

输出HTML文件是: ../ main/resourcess /

输出所有资产文件: ../ main/assets/[js/css/img]

在index.html文件中,查找资产的路径必须是"js/name.js"和类似的.

我目前的vue.config.js没有提供:

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return options;
            });
    },
    css: {
        sourceMap: true
    },


    baseUrl: '/',
    outputDir: '../main/resources/',
    assetsDir: '../main/assets/',
    runtimeCompiler: undefined,
    productionSourceMap: undefined,
    parallel: undefined,
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.(png|jpg|gif)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                outputPath: '../main/assets/img',
                                name: '../main/assets/img/[name].[ext]'
                            }
                        }
                    ]
                }
            ]
        }
    }
}

有人可以帮忙配置这个文件吗？谢谢!
与
tschaefermedia 亲切的问候

对不起,我忙于其他项目.现在回到VueJS.
更新:
我尝试了GIT帖子中的内容.我的vue.config.js文件现在看起来像这样: …

我有一个新的基于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 = …