问题标签 [vue-cli-4]

我有一个 SASS 架构，我在其中放置了所有样式。我只有一个 SASS 文件可以导入每个部分（包括变量、mixin 等）。我想知道如何访问 Vue 提供给我们的每个 SFC 上的所有这些样式，这样我就可以在我的 SFC 中使用 mixins、变量等。

最后，这应该如何处理？获取所有 SCSS 和 SFC 样式并输出一个 CSS 文件？还是使用样式加载器？我正在使用 Vue-CLI 4 和 Vue.js 3。

这是我的架构到目前为止的样子：

我是 Vue CLI 生态系统的新手。在 vue.config.js (@vue/cli 4.5.9) 中，除了 之外configureWebpack，内部通常会发生什么变化？

更新 1：修复了导致我的初始构建错误的语法问题。

更新 2：使用 Webpack 插件找到了我自己的解决方案。请参阅接受的解决方案。

我想public/index.html在构建过程中添加一些自定义 HTML 注释。我添加了这样的内容：

在我的vue.config.js，我已经设置VUE_APP_VERSION并VUE_APP_BUILD_DATE相应地：

但是当我实际构建 ( npm run build) 时，注释被完全删除，所有内容都被最小化。

如何保留我的评论？

比如我这里安装了vuecli，我从vscode终端得到的vue版本安装在C:\Users\username\AppData\Roaming\npm\node_modules@vue\cli，我打开gitbash得到的vue版本就可以了安装在我的d盘自定义目录下（环境变量配置的地方）。

我将vscode终端中的插件安装到我D盘的一个自定义目录下，但是我使用的是安装在c盘的插件。应该如何卸载c盘位置的安装。（直接卸载会卸载我的d盘安装，c盘安装无法更新，删除对应文件会报错）

我想通过 Vue CLI 4.5 编译文件，但是我想省略资产文件夹，如js, css, img, fonts.

这就是我的 vue.config.js 文件现在的样子。我试图改变publicPath并assetsDir没有运气。

Vue 正在尝试从以下位置加载所有内容：

就我而言，有没有办法将所有内容都转储到static文件夹中？

我正在使用 Vue CLI 4.4 生成一个库：

vue-cli-service build --target lib --formats=umd,umd-min --name example main.js

结果，我在 dist 文件夹中获得了许多文件：

• example.umd.js
• example.umd.min.js
• ...

我想.umd从文件名中删除 。如何做到这一点？

我在 my 中尝试了以下两件事vue.config.js，但没有帮助：

似乎 vue-cli 在这里设置了这个“后缀”：https ://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveLibConfig.js#L140 不幸的是，如果不分叉整个项目，我无法弄清楚如何覆盖它。

我正在使用vue-cli4多页，我希望能够indexPath在pages配置中使用。怎么做？

在我的模板中，我正在使用代码

或者

它给出了以下错误

尝试在 vue.config.js 中使用 url 加载器仍然是同样的问题

更新：已解决

简单地使用<img src="/assets/images/logo-icon.png" alt="homepage" class="dark-logo" />而不是<img src="assets/images/logo-icon.png" alt="homepage" class="dark-logo" />

解决了我的问题，。并且 @ 不适用于我猜的最新 Vue 版本，并且它也不在文档中。

我在 JSON 文件中有一组变量，我试图在样式（SCSS）和我的 Vue 3（使用 Vue CLI）环境之间共享。

./vars.json

让 JSON 进入脚本方面的意识是很容易的部分。我对如何将变量放入 SCSS 感到困惑。根据我可以在网上找到的参考资料（其中包括Vue CLI Docs），我最好的办法是通过.prependDatasassvue.config.js

vue.config.js

......这是渲染"$foo: 123;\n' + '$bar: abc;\n'"- 我通过吐出 a console.log( {string} )in来确认这一点jsonVarHelper。进一步证实，我可以使用 Vue 组件<style>部分中的变量。

./src/App.vue（省略<template>并<script>为简洁起见）

果然，#app在编译页面中附加了字符串“abc”。太好了，对吧？问题解决了……</p>

但是，当我尝试引用*.scss文件中的变量时，WebPack 会引发语法错误。

./src/styles/main.scss

我猜这是什么时候从配置scss-loader中添加数据的问题。prependData是否可以在尝试编译本机文件之前解析/注入该字符串？*.scss

我有一个图片库应用程序：

• 前端（Vue 2.6）将允许用户上传图片以及一些基本信息
• 后端（NodeJs）将创建拇指图像并将它们与原始图像一起存储在上传文件夹中

我将上传文件夹放在前端的公共文件夹下。这是应用程序的文件结构：

像往常一样，在构建时，文件在 nginx 指向的 dist 文件夹中被复制、缩小等。构建后一切都很好 - 图像是从公共文件夹中复制的，并且可以在前端应用程序中访问。但是上传的新图像不可用，因为它们不在网络服务器的路径中。另外，如果我将上传文件夹放在 dist 下，它将在下一次构建时被删除。我还尝试了涉及符号链接的解决方法，但没有成功。

有没有办法将上传文件夹保留在 Vue 构建过程之外并直接访问它们？或者我的问题的任何其他解决方法？