vue cli3使用什么配置 • Worktile社区

worktile

Worktile官方账号

Vue CLI 3 是一款基于 Vue.js 进行快速开发的工具，它默认集成了一些常用的配置项，同时也提供了灵活的配置扩展能力。下面是 Vue CLI 3 的常见配置使用:

项目配置文件：Vue CLI 3 使用了一个名为 vue.config.js 的文件来进行项目配置，该文件应该放在项目的根目录下。在这个文件中，你可以通过导出一个包含配置选项的 Object 来定制构建过程。
配置选项：

publicPath：指定项目的基础 URL，用法和 webpack 的 output.publicPath 选项一致，可以用来解决静态资源加载路径的问题。
outputDir：指定项目构建输出的目录，默认为 dist。
assetsDir：指定静态资源 (js、css、img、font 等) 的输出目录，默认为 static。
indexPath：指定生成的 index.html 的输出路径，默认为 index.html。
css：配置 CSS 相关选项，如是否开启 CSS source map、是否启用 CSS modules 等。
devServer：配置开发服务器的选项，如代理、自动打开浏览器等。
chainWebpack：通过 webpack-chain 提供的 API 修改内部的 webpack 配置。
configureWebpack：直接配置 webpack 的配置对象，可以通过这个选项来修改或增加 webpack 配置。
transpileDependencies：指定需要使用 Babel 转译的依赖包。
lintOnSave：配置是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。

这些仅是 Vue CLI 3 中一部分常用的配置选项，还有更多功能强大的选项，请参考 Vue CLI 3 官方文档进行更详细的了解和使用。通过合理配置这些选项，你可以高效地定制和构建自己的 Vue.js 项目。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue CLI 3是一个用于快速搭建Vue项目的脚手架工具。它提供了一套默认的项目配置，同时也支持自定义配置。以下是Vue CLI 3常用的配置项：

Babel配置：Vue CLI 3使用Babel来转译ES6+代码，允许用户通过.babelrc或babel.config.js文件来自定义Babel的配置选项。可以配置一些预设（presets）或插件（plugins）来适应特定的需求。
ESLint配置：ESLint是一个用于检测和修复JavaScript代码问题的工具。Vue CLI 3使用ESLint来编写规范的代码，并提供了默认的ESLint配置。用户可以在项目根目录的.eslintrc.js文件中自定义ESLint的配置选项，例如设置代码风格、规则等。
CSS预处理器配置：Vue CLI 3支持在项目中使用CSS预处理器，如Sass、Less等。可以通过vue.config.js文件中的css.loaderOptions属性来配置预处理器的选项，例如设置全局变量、mixins等。
常用插件配置：Vue CLI 3提供了一些常用的插件，如Vue Router、Vuex等。用户可以在创建项目时选择是否使用这些插件，并在vue.config.js文件中进行相关配置，例如路由模式、Vuex的store配置等。
Webpack配置：Vue CLI 3使用Webpack来构建项目。用户可以通过vue.config.js文件来修改默认的Webpack配置，例如设置文件路径别名、添加loader、配置打包输出等。

总结起来，Vue CLI 3使用了一些常用的配置项，如Babel、ESLint、CSS预处理器和Webpack等，用户可以根据项目需求自定义配置，提供更好的开发体验和项目构建效果。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue CLI 3 是一个脚手架工具，可以帮助开发者快速搭建基于 Vue.js 的项目。它通过一系列的提示和选项，生成一个完整且具备最佳实践的项目结构。

Vue CLI 3 通过基于配置文件的方式来设置和调整项目的配置。默认情况下，Vue CLI 3 使用了一组预定义的配置，但是也允许开发者通过配置文件对这些预定义的配置进行调整，甚至可以完全重写这些配置。

以下是进行 Vue CLI 3 配置的步骤和方法。

安装 Vue CLI 3

首先确保已经安装了 Node.js 和 npm，然后可以通过命令行工具全局安装 Vue CLI 3：

npm install -g @vue/cli

创建项目

使用以下命令创建一个新的 Vue 项目：

vue create <project-name>

执行命令后，会显示一系列的提示，可以根据需要选择所需的特性和配置。

配置文件

Vue CLI 3 使用了 webpack-merge 库来合并配置文件。生成的配置文件分为两类：项目配置文件和插件配置文件。

项目配置文件

项目配置文件 (vue.config.js) 是用来修改 Vue CLI 3 自动生成的配置的。默认情况下，该文件是不存在的，你可以在项目根目录下创建一个 vue.config.js 文件来进行配置。

下面是一个简单的项目配置文件的例子：

module.exports = {
  // 修改输出目录
  outputDir: 'dist',
  // 修改公共路径
  publicPath: '/',
  // ...其他配置
}

在这个例子中，我们修改了输出目录为 dist，公共路径为 /。你可以根据需求修改其他配置项。

插件配置文件

插件配置文件可以用来修改一些特定插件的配置。例如，如果你使用了 ESLint，并且想要修改一些 ESLint 的配置项，可以在项目根目录下创建一个名为 eslintConfig.js 的文件，并在其中添加你需要修改的配置项。

配置参考

Vue CLI 3 提供了大量的配置选项，下面列举了一些常用的配置选项，并提供了一些配置参考的链接：

outputDir: 指定项目的输出目录。参考文档
publicPath: 指定项目的公共路径。参考文档
devServer: 配置开发服务器。参考文档
lintOnSave: 是否在保存时执行 lint 检查。参考文档
transpileDependencies: 指定需要通过 Babel 转译的依赖包。参考文档
chainWebpack: 修改内部的 webpack 配置。参考文档

以上只是一部分常用的配置选项，更详细的配置参考请参考 Vue CLI 3 的官方文档。

总结：

Vue CLI 3 使用配置文件进行项目配置，可以通过项目配置文件和插件配置文件来分别修改不同的配置。常用的配置选项有 outputDir、publicPath、devServer、lintOnSave、transpileDependencies 和 chainWebpack。详细的配置参考请查阅 Vue CLI 3 的官方文档。

1年前 0条评论