标签: vue-cli

我正在尝试将我现有的庞大 Django 项目（目前在前端的各个页面中使用来自 CDN 的 Vue）转换为通过 NPM 的 SPA，后端和前端现在是分开的（除了 Django 处理一些 URL 路由并加载Vue 最初）。

我遇到了静态文件和 URL 路由的问题。在 中vue.config.js，最初建议我设置值如下：

const pages = {
  index: "src/main.js"
};
module.exports = {
  runtimeCompiler: true,
  publicPath: "/static/vue/",
  outputDir: "./dist/static/vue/",
  indexPath: "../../templates/vue_index.html",
  pages: pages
};

这样当与 Django 查找静态文件的方式结合起来时：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend/dist/templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'frontend/dist/static')]
STATIC_URL = '/static/'

该页面将能够加载。

不幸的是，如果我尝试加载页面，而不是在网站 root 加载/，它会在 …

我的环境：

- OS: Ubuntu 20.04
- Yarn: 3.1.1
- Node: v16.12.0

说明链接： https: //cli.vuejs.org/guide/installation.html

当我运行命令时：yarn global add @vue/cli 我收到错误：

Usage Error: The 'yarn global' commands have been removed in 2.x - consider using 'yarn dlx' or a third-party plugin instead

$ yarn run [--inspect] [--inspect-brk] [-T,--top-level] [-B,--binaries-only] <scriptName> ...

我正在开发一个 vuejs 项目，我们正在尝试使用外部 vue cli 应用程序作为库。在这些库中，我们希望能够导出一个路由器配置，它可以延迟加载这些模块之一中的组件。然而，当我们使用 vue-cli-service 将它编译成一个库并且它有惰性块资产时，我们无法使用 webpack 解决它们。

我有一种感觉，它与公共路径或一些简单的配置有关，但在这个阶段我只是被卡住了，头撞墙了。

https://github.com/EvanBurbidge/mono-repo-tester

这是我们正在做的事情的简单概述

App1 -> main app, installs App2, imports { router } from 'app2'
App2 -> library, compiles to common js lib exports router config

app1 的控制台输出 app2的路由器配置 从 app1 导入 app2 的路由器

/* config.module.rule('js') */ { test: /\.jsx?$/, exclude: [ function () { /* omitted long function */ } ], use: [ /* config.module.rule('js').use('cache-loader') */ { loader: 'cache-loader', options: { cacheDirectory: '/Users/evan/test/node_modules/.cache/babel-loader', cacheIdentifier: '39e7e586' } }, /* config.module.rule('js').use('babel-loader') …

对于一个大学项目，我和我的团队使用 Vue.js (Vue-Cli) 开发了一个 Web 应用程序。为了翻译应用程序，我们集成了 vue-i18n。

最近，我们将应用程序升级为使用服务工作人员，包括后端触发的推送通知。

我现在想知道如何在服务人员内部处理不同的语言。至少在使用 vue-cli-pwa 插件进行服务工作线程集成时，无法直接访问其他模块/组件，因此我无法访问翻译模块。

有什么办法可以做到这一点吗？或者，在服务工作人员内部处理推送通知翻译的方法通常是完全错误的吗？我似乎找不到任何有关推送通知和 i18n 的信息。

谢谢你！

在热重载期间，Webpack 会卡住95% emitting CopyPlugin几秒钟。

我的公共文件夹中有很多文件，大部分是图像（大约 1GB），它们必须显示在我的 VueJS 应用程序上。如果我删除它们，我就不再有问题了。

这是我的package.json依赖项：

{ 
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-plugin-pwa": "~4.3.0",
    "@vue/cli-plugin-router": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

这是我的 vue.config.js 文件：

const path = require("path");

function resolveSrc(_path) {
  return path.join(__dirname, _path);
}
// vue.config.js …

如何在动态路由导入中禁用rel="prefetch"？

我正在使用 @vue/cli 4.3.1 和 Webpack 4.43.0，尝试禁用预取：

在route.js中

const Registration = () => import(  /* webpackPrefetch: false */
    /* webpackChunkName: "registration" */ '../modules/Popup/Registration.vue')

尝试在 vue.config.js 中配置，但没有帮助

chainWebpack: config => {
  config.plugins.delete('prefetch')
  config.plugins.delete('prefetch-index') // or
  config.plugins.delete('preload')
}

但无论如何都有

<link rel="prefetch" ....>

我有一个 vue 前端和 spring boot 后端应用程序。我的应用程序有多个具有不同 url 路径的实例（例如 /instance1、/instance2），但使用相同的构建项目 - 这意味着每个实例都运行相同的 jar。该应用程序还提供静态文件 - 已编译的 vue 应用程序的 index.html。

我的问题是vue应用程序需要动态地知道从哪个url路径获取其所有静态文件，因此例如当我获取instance1的index.html时，它需要从/instance1/assets获取所有资产

我读了这个问题的许多答案，他们基本上都建议动态配置webpack_public_path全局变量，就像第一个答案一样

所以在我的 vue 应用程序中我这样做了：

在main.js文件中：

import './publicpath'
import Vue from 'vue'

然后在publicpath.js文件中：

__webpack_public_path__ = `/${window.location.pathname.split('/')[1]}/`

上面链接的答案的问题是，它仅适用于我将应用程序作为开发应用程序运行时（在npm run servevue 项目上运行时）。构建项目后这不起作用，构建的index.html由spring boot提供。

我找不到任何解决这个问题的答案，所以我非常感谢任何帮助

谢谢你！

我有一个相当大的 Vue 项目，最初是使用 vue-cli 创建的。我在构建时收到臭名昭著的“无法满足块组所需的顺序”警告。经过多次搜索，我认为解决方案是添加ignoreOrder到初始配置选项，mini-css-extract-plugin但我不知道如何。我认为这应该在 中完成vue.config.js。该文件的内容是：

module.exports = {
  lintOnSave: false
}

我试过了：

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({ ignoreOrder: true })
    ]
  }
}

但这给了我一个错误，我认为这意味着模块被加载了两次。

我试过了：

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      ignoreOrder: true
    }
  }
}

但这给了我一个语法错误。

我如何设置该选项？

如果我跑了npm run serve，那么接下来会发生什么。

 INFO  Starting development server...
 ERROR  TypeError: The 'compilation' argument must be an instance of Compilation
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/home/anderson/@python/zeta-value/front/node_modules/webpack/lib/NormalModule.js:193:10)
    at /home/anderson/@python/zeta-value/front/node_modules/vue-loader/lib/plugin-webpack5.js:39:47
    at SyncHook.eval [as call] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
    at SyncHook.lazyCompileHook (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:631:26)
    at /home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:662:28)
    at /home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at AsyncSeriesHook.lazyCompileHook …

如果字长太长，我想显示 Vue 工具提示或悬停时，我需要显示标签的全名。我尝试了很多研究，但没有任何效果。

https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/# https://github.com/apexcharts/apexcharts.js/issues/2281。

我希望当用户将鼠标悬停在 Y 轴标签上时，我需要显示全文。

我正在使用条形图

这是我对 API 的回复

[
{
    "name": "Meetings",
    "data": [
        15,
        05,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10
    ]
},
{
    "name": "R & D",
    "data": [
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10
    ]
}
]

   


[
{
    "name": "Meetings",
    "data": [
        15,
        05,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10
    ]
},
{
    "name": "R & D",
    "data": [
        10,
        10,
        10, …
Run Code Online (Sandbox Code Playgroud)