前言
由于之前的项目中都是用的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 = {
<!--所有的资源都会被链接为相对路径, 此属性相当于2.x中的 assetsPublicPath-->
publicPath: './',
<!--生产环境构建文件的目录-->
outputDir: 'dist',
<!--放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。-->
assetsDir: 'static',
<!--是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。-->
<!--这个值会在 @vue/cli-plugin-eslint 被安装之后生效。-->
lintOnSave: process.env.NODE_ENV === 'development',
<!--如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。-->
productionSourceMap: false,
<!--所有 webpack-dev-server 的选项-->
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版本的很多配置文档都说明的很清楚,但实际上自己用起来发现会看不会写,我会在项目中逐渐将用到的一些配置都写成笔记,方便你我以后查看。
❤️ 看完帮个忙
如果你觉得这篇内容对你挺有启发,我想邀请你帮我个小忙:
-
点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)
-
关注公众号「番茄学前端」,我会定时更新和发布前端相关信息和项目案例经验供你参考。
-
加个好友, 虽然帮不上你大忙,但是一些业务问题大家可以探讨交流。