标签: vue-cli

我想生产代码不精缩在dist/与@vue/cli 4.1.2

1?第一次尝试设置 vue.config.js

module.exports = {
  chainWebpack: config => {
  config.optimization.minimize(false)
  }
}

然后其他部分正常，但内联脚本仍然被缩小。

var Appvue_type_template_id_7a951895_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"app"}},[_c('img',{attrs:{"alt":"Vue logo","src":__webpack_require__("cf05")}}),_c('HelloWorld',{attrs:{"msg":"Welcome to Your Vue.js App"}})],1)}

2？第二次尝试

使用开发模式 vue-cli-service build --mode development

但代码格式是 eval(...)

我使用默认的 vue-cli 命令创建了一个 vue 项目。

当 webpack 构建时，它失败了，如图所示：

我没有使用任何特殊的 webpack 配置。我究竟做错了什么？

我的 package.json：

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "firebase": "^7.6.2",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-pwa": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 …

当我跑步时， npm start 我得到

ERROR  TypeError: Cannot read property 'version' of undefined
TypeError: Cannot read property 'version' of undefined

这发生在我跑完之后

npm install

我试图通过运行来解决这个问题， npm -g install npm@version但它给了我这个错误

npm ERR! code ETARGET
npm ERR! notarget No matching version found for npm@version.

在热重载期间，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)

每次启动vite都会遇到这个问题

\xe4\xb8\x8a\xe5\x8d\x889:49:42 [vite] new dependencies found: ant-design-vue/es, ant-design-vue/es/input/style, ant-design-vue/es/form/style, updating...\n\xe4\xb8\x8a\xe5\x8d\x889:49:42 [vite] Failed to load source map for /node_modules/.vite/chunk-IVKUFRUM.js?v=f72e0228.\n\xe4\xb8\x8a\xe5\x8d\x889:49:42 [vite] Failed to load source map for /node_modules/.vite/chunk-45TFAW5X.js?v=f72e0228.\n\xe4\xb8\x8a\xe5\x8d\x889:49:43 [vite] Failed to load source map for /node_modules/.vite/vuex.js?v=f72e0228.\n\xe4\xb8\x8a\xe5\x8d\x889:50:14 [vite] \xe2\x9c\xa8 dependencies updated, reloading page..\n

好像是导致网页启动很慢，我没有发现类似的问题

这是开发环境

  "dependencies": {\n    "@ant-design-vue/pro-layout": "^3.1.3",\n    "@ant-design/icons-vue": "^6.0.1",\n    "ant-design-vue": "^3.0.0-alpha.9",\n    "axios": "^0.20.0-0",\n    "js-base64": "^3.7.2",\n    "store": "^2.0.12",\n    "vue": "^3.2.21",\n    "vue-router": "^4.0.12",\n    "vuex": "^4.0.2"\n  },\n  "devDependencies": {\n    "@vitejs/plugin-vue": "^1.6.0",\n    "@vue/compiler-sfc": "^3.2.19",\n    "less": "^4.1.2",\n    "typescript": "^4.3.2",\n    "unplugin-auto-import": "^0.4.10",\n    "unplugin-vue-components": …