Vue CLI3.x 配置指南「初识Vue CLI3.x 版本」

最新推荐文章于 2024-03-01 22:51:19 发布

weixin_46369542

最新推荐文章于 2024-03-01 22:51:19 发布

阅读量221

点赞数

分类专栏：架构

本文链接：https://blog.youkuaiyun.com/weixin_46369542/article/details/104467427

版权

架构专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了从 Vue CLI 2.x 版本迁移到 3.x 版本的过程，包括包名变化、Node版本要求、安装与创建项目的方法，以及在项目中如何进行各种配置，如环境变量、代理设置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于之前的项目中都是用的vue-cli 2.x 版本，最近新开的项目使用了vue-cli 3.x 版本的脚手架，因此总结一下笔记，方便以后查看使用。
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
安装
可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli

OR

yarn global add @vue/cli
复制代码安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确：
vue --version
复制代码创建项目
当你安装vue-cli 3.x版本以后，在使用以前2.x版本的命令安装已经不成功了，需要按照以下方式
拉取 2.x 模板 (旧版本)
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
npm install -g @vue/cli-init

`vue init` 的运行效果将会跟 `vue-cli@2.x` 相同

vue init webpack my-project

vue init webpack myApp
复制代码创建 3.x 模版 (新版本)
运行以下命令来创建一个新项目：
vue create hello-world
复制代码你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

通过方向键选择特性，空格确认插件，回车确认完成选项 ===> 这里我选择了手动配置(Manually)
添加了Babel和Vuex和Router还有CSS Pre-processors插件

接下来会让你选择router的模式，默认回车

接下来会让你选择CSS Pre-processors的格式，这里选择了Sass/SCSS (with node-sass)

最后我们选择配置文件格式为package.json，然后保存配置即可完成。

项目结构如图：

配置参考
vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
这个文件应该导出一个包含了选项的对象：
// vue.config.js
module.exports = {
// 选项…
}
复制代码以上内容都是vuecli官方文档有的。大家也可以直接去看官网文档，接下来我将记录自己项目中的一些配置。
// vue.config.js
module.exports = {

publicPath: ‘./’,

outputDir: ‘dist’,

assetsDir: ‘static’,

lintOnSave: process.env.NODE_ENV === ‘development’,

productionSourceMap: false,

devServer:{

port: process.env.port || 9527,

<!--dev-server在服务器启动后打开默认浏览器-->
open: true，

<!--出现编译器错误或警告时，在浏览器中显示全屏覆盖。-->
overlay: {
  <!--不显示警告-->
  warnings: false,
  
  <!--显示错误-->
  errors: true
},

<!--如果你的前端应用和后端 API 服务器没有运行在同一个主机上，
你需要在开发环境下将 API 请求代理到 API 服务器。-->
proxy: {
  '/api': {
    target: 'http:www.baidu.com', // 要代理的API地址
    changeOrigin: true, // 允许跨域
    pathRewrite: {
        <!--这里理解成用'/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替--> 
        <!--比如我要调用'http://www.abc.com/user/add'，直接写'/api/user/add'即可'-->
        '^/api' : ''
    }
  },
  '/foo': {
    target: '<other_url>'
    ......
  }
}

},
configureWebpack: {
name: name,
resolve: {

alias: {
‘@’: resolve(‘src’)
}
}
}
}
复制代码以上就是部分配置内容，很简单基本看文档就能看懂。
配置环境变量
在3.x版本中，我们直接在根目录下新建.env.development与.env.production还有.env.test文件用来设置不同环境下的某些变量的不同属性。例如：

本地环境也就是开发环境

生产环境

测试测试

通常我们会在封装axios中去设置baseUrl地址，这样就可以根据不同环境去调用不同的api地址
最后在打包的时候添加一下环境变量，以此来选择打包出的文件是什么环境下的

结尾
关于Vue CLI3.x版本的很多配置文档都说明的很清楚，但实际上自己用起来发现会看不会写，我会在项目中逐渐将用到的一些配置都写成笔记，方便你我以后查看。