vue-cli基本配置和webpack配置修改的完整步骤

脚手架

脚手架帮助我们处理相关的配置，比如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):选择默认的配置项(安装所需的模块，稍后进行配置)。手动选择功能：手动选择配置项目。如果选择默认文章没有意义，我们选择手动选择配置项

这里选择脚手架中的webpack配置，空格键就是选择。我已经选择了这些项目，如果有必要的话，还会增加或减少它们

babel(babel-preset-Vue-app):babel-preset-env最新的ECMAScript函数，transformation Vue JSX变换生成器和async/await等。路由器：Vue的官方路由管理器vuex:Vue中用于公共状态管理的插件(处理组件之间的信息通信)CSS预处理器：Css预处理器(sass/less/stylus)l inter/formatter:eslint语法检测单元测试：单元测试E2E测试：端到端测试

如果要使用路由器的历史模式，请选择y；选择哪种CSS预处理语言的配置规则，我用的比较少要根据我自己的需求来选择

选择自动代码格式检测，我使用vscode并选择eslintpretier

选择第一个以保存配置供下次使用

第一个选项是将配置信息放入一个单独的文件中，第二个选项是将其放入package.json中创建的项目目录中

Src:项目开发源文件

Main.js:打包编译的入口文件App.vue:项目页面的入口文件组件：public components xxx.vue用于存储当前项目的资产：xxx.png XXX . cssapublic用于存储项目中要引入的静态资源文件。

Index.html:在当前项目的主页面上，我们最终通过webpack和vue对所有用src编写的内容进行编译和渲染，最后呈现在index.html的#app容器中xxx.xx:有时候我们的一些资源可能要在index.html单独引用，所以放在这个文件夹中，但是在开发的时候，除了这样的资源，其余的建议放在src文件夹开发模式下。基于以下命令，我们启动一个本地服务，并预览基于webpack编译的内容

在$npm run serve或$ Yarnseserve的生产模式下，编译并打包编写的内容，最后将其部署到服务器上

$npm运行构建或$纱线构建的其他命令

$vue inspect查看当前项目的默认webpack配置信息$vue add [plugin]在当前项目中安装插件$ vueiui:使用图形界面创建和管理项目

将打开一个浏览器窗口，通过图形界面引导您完成项目创建过程

$ vue create-help:您可以在vue中查看命令

稍微深入一点

创建项目后，默认配置中匹配了less/sass等规则。如果我们在项目中需要少用，我们不需要配置规则，只需要安装相应的模块和加载器

$纱线添加更少-更少-加载器-dscript导入器。/XXX/xxx.xx'//=导入所需模块/脚本样式lang=' less './/样式修改默认的webpack配置

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

module . exports={//=process . env . node _ env:是存储在环境变量public path : process . env . node _ env==' production '中的开发环境还是生产环境？http://www.xxx.cn/':'/',//=outputdir/=自定义目录名，将生成的JS/CSS/pictures等静态资源放入这个目录。assetsDir: 'assets '，//=关闭生产环境中的资源映射(不会在生产环境中创建xxx.js.map文件)。productionsourcemap:为false。//=设置一些webpack配置项，并将这些配置项与默认配置项合并，以配置web pack 3360 {plugins 3360 []}。//=修改内置webpack配置项链web pack : config={//=config :原始配置信息对象config.module.rule ('images ')。使用('网址加载器')。加载程序(“网址加载程序”)。点击(选项={options。limit=200个返回选项；});}，//=修改webpack-dev-server配置(尤其是跨域代理)devserver : { proxy : }///请求地址/用户/添加//代理地址http://api.xxx.cn/user/add'/': {更改原点： true，目标： ' http://api.xxx.cn/'}},//=当有多个核心cpu时：启动并行压缩，要求并行3360(' OS ')。CPU(. length 1)摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。