vue-cli 基础配置及 webpack 配置修改的完整步骤

Vue CLI 脚手架介绍

脚手架

脚手架工具能够自动处理 webpack 等相关配置，开发者只需基于脚手架快速构建项目即可，项目中必然包含 webpack 的相关配置。

Vue 脚手架 vue-cli

使用任何工具的第一步都是安装。

安装与项目创建

1. 安装脚手架（通常建议安装到全局环境）。

//=>用npm安装
$npm install @vue/cli -g
//=>用yarn安装
$yarn global add @vue/cli

安装成功后，全局环境中会生成 $vue 可执行命令。可以通过执行 $vue --version 查看版本号，以确认是否安装成功。

2. 创建工程化项目。

$vue create [项目名称]（项目名称需遵循 npm 包命名规范：仅包含数字或小写字母）。

第一项显示的是之前保存的配置，如果是首次创建，则会显示第二项和第三项。

• default (babel,eslint)：选择默认配置项（后续需自行安装所需模块并进行配置）。
• Manually select features：手动选择配置项。

如果选择默认配置，本文的深入讲解部分将失去意义，因此这里选择手动选择配置项。

此处选择脚手架中的 webpack 配置，使用空格键进行选择，我选择了上述这些项，如有需要可自行增减。

• babel（babel-preset-vue-app）：babel-preset-env 提供最新的 ECMAScript 功能、转换 Vue JSX、generator 和 async/await 等。
• Router：Vue 官方的路由管理器。
• Vuex：Vue 中实现公共状态管理的插件（用于处理组件之间的信息通信）。
• Css Pre-processors：CSS 预处理器（支持 SASS/LESS/Stylus）。
• Linter / Formatter：eslint 语法检测。
• Unit Testing：单元测试。
• E2E Testing：端到端测试。

询问是否使用路由器的历史模式，选择 Y；询问选择哪个 CSS 预处理语言的配置规则，我使用的是 less，可根据自身需求选择。

选择自动化代码格式化检测，我使用的 vscode，选择了 ESLint+Prettier。

选择第一个选项可以保存配置，方便下次使用。

• 第一个选项是将配置信息放到一个单独的文件中。
• 第二项是将配置放到 package.json 里。

项目目录结构解析

创建后的项目目录结构如下。

src：项目开发源文件。

• main.js：打包编译的入口文件。
• App.vue：项目页面的入口文件。
• components：存放当前项目的公共组件。
  • xxx.vue
• assets：一般存放项目中需要引入的静态资源文件。
  • xxx.png
  • xxx.css

public

• index.html：当前项目的主页面，最后所有在 src 中写的内容，通过 webpack、vue 编译渲染，最终呈现在 index.html 中的 #app 容器中。
• xxx.xx：有些时候某些资源可能需要单独在 index.html 中引用，将其放在此文件夹下，但开发时除了此类资源外，其余都建议放在 src 文件夹中。

开发与生产模式命令

开发模式下，基于以下命令启动本地服务，预览基于 webpack 编译后的内容。

$npm run serve 或者 $yarn serve

生产模式下，将写好的内容进行编译打包，最后部署到服务器上。

$npm run build 或者 $yarn build

其他常用命令

vue-cli 的其他命令。

$vue inspect 查看当前项目默认的webpack配置信息
$vue add [plugin] 在当前项目中安装插件

$vue ui：以图形化界面创建和管理项目。

这会打开一个浏览器窗口，并以图形化界面引导你完成项目创建的流程。

$vue create --help：可以查看 vue 中的命令帮助。

深入配置与 webpack 修改

vue-cli 的一点深入。

创建项目后，默认配置中已经配好了例如 less/sass 等规则，如果项目中需要使用 less 等，无需额外配置规则，只需安装对应的模块和加载器即可。

$yarn add less less-loader -D

<script>
  impoer './xxx/xxx.xx' //=>导入需要的模块
</script>

<style lang="less">
  ...../
</style>

修改默认的 webpack 配置。

需要在根目录中创建 vue.config.js 文件，在这个文件中修改相关配置，下面代码就是修改 webpack 的相关配置。

  module.exports = {
	//=>process.env.NODE_ENV：环境变量中存储的是开发环境还是生产环境
	publicPath: process.env.NODE_ENV === 'production' ? 'http://www.xxx.cn/' : '/',
	//=>outputDir
	//=>自定义目录名称，把生成的JS/CSS/图片等静态资源放置到这个目录中
	assetsDir: 'assets',
	//=>关闭生产环境下的资源映射（生产环境下不在创建xxx.js.map文件）
	productionSourceMap: false,
	//=>设置一些webpack配置项，用这些配置项和默认的配置项合并
	configureWebpack: {
		plugins: []
	},
	//=>直接去修改内置的webpack配置项
	chainWebpack: config => {
		//=>config:原始配置信息对象
		config.module
			.rule('images')
			.use('url-loader')
			.loader('url-loader')
			.tap(options => {
				options.limit = 200 * 1024;
				return options;
			});
	},
	//=>修改webpack-dev-server配置（尤其是跨域代理）
	devServer: {
		proxy: {
			//请求地址 /user/add
			//代理地址 http://api.xxx.cn/user/add
			"/": {
				changeOrigin: true,
				target: "http://api.xxx.cn/"
			}
		}
	},
	//=>多余1核cpu时：启动并行压缩
	parallel: require('os').cpus().length > 1
  }
  

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对本站的支持。