标签: vue-cli-3

我已经尝试了几个小时，以便为我的新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编写的步骤，但是可能缺少一些超级傻的东西。

我正在使用带有打字稿支持的 vue cli 3。实际上，我正在尝试使用 vuejs 创建 Web 组件。

主文件

import Vue from 'vue';
import './plugins/vuetify';
import App from './App.vue';
import router from './router';
import store from './store';
import wrap from '@vue/web-component-wrapper';

import RoleManagement from './views/role-management/RoleManagement.vue';

const CustomElement = wrap(Vue, RoleManagement);
window.customElements.define('custom-component', CustomElement);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

创建web组件的命令如下，

vue-cli-service build --target wc --name custom-component ./src/main.ts

在出现这个错误后，

找不到模块“@vue/cli-plugin-babel”

在身份服务器身份验证后，当它重定向到我的应用程序时，它给出

异常：关联失败。地点未知

现在因为我正在使用SPA。这条路肯定是没有的。但问题是我如何定义它。我应该在那里做什么。

我使用了 Identityserver 的混合流。

https://localhost:44375/signin-oidc

我已经提到了以下内容。

https://github.com/IdentityServer/IdentityServer4.Samples/blob/master/Clients/src/MvcHybridAutomaticRefresh/Startup.cs

但在上面的链接中有一个 SPA 中间件。这是VueCliMiddleWare。（对我来说，这正在造成问题。路线。）

（对于其余路由，它按照以下代码返回索引文件。只有此/oidc-client路径不起作用。）

     app.Use(async (context, next) =>
        {
            await next();
            if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
            {
                context.Request.Path = "/index.html";
                await next();
            }
        })
.UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new List<string> { "index.html" } });

如果我定义以下

routes.MapSpaFallbackRoute(
                    name: "spa - fallback",
                    defaults: new { controller = "CatchAll", action = "Index" });

然后该路由重定向到该控制器。但我无法返回索引文件。

目标：
传递要在构建时使用的参数，以便能够在我的 .env.production 文件中使用它（或者如果不可能的话，可以让我将其用作环境变量）。

.env.production 文件：

VUE_APP_CLIENT_ID=00-should-be-using-what-was-passed-by-command-00

码头工人文件：

#Inside my docker file
RUN npm run build #I need to pass the argument here

我的 package.json 脚本是：

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
 },

为什么：
OBS：我确实使用 webpack，它已经由 vue-cli
配置我知道我可以配置不同的 .env 文件和模式，但我需要能够“注入”或在我的 .env.production 中有一个动态变量文件，因为有时我为不同的服务器构建生产。
我可以创建更多文件，这可以解决我的问题，但我想要更实用的东西。

上下文：
我正在使用 Docker 和 Auth0，我实际上使用了一个VUE_APP_CLIENT_IDenv 变量来定义它是否要为请求点击，我已经有两个不同的VUE_APP_CLIENT_ID定义（一个关于 .env.development 一个关于 .env.production）问题是我需要在两台不同的服务器中部署完全相同的服务器，每台服务器都针对生产中的不同 client_id。

工具：
Docker、docker-compose、Vue.js、vue-cli 3、npm

操作系统：
Ubuntu 16.04

我想测试一个已经存在的Vue-CLI 3项目。创建项目时，我尚未初始化测试预设。我已经搜索过，但是没有找到任何合适的结果。我也阅读了文档，但是它说在创建项目时要添加测试。

当我运行使用vue-cli-service serve. 我该如何调试这个问题？

我在 Mac 上工作，Node 通过 nvm 安装。节点版本：10.16，npm 版本：6.9

我有一个用 vue-cli 生成的简单项目。当我运行该vue-cli-service build命令时，它会正确生成 CSS 文件。当我运行该vue-cli-service build --watch命令时，它只会构建 JavaScript 文件。没有 CSS 文件。

如何在监视模式下生成 CSS 文件？