若 NPM 下载过慢,请参考本处改换镜像源:Here
首先新建一个 vue 测试项目,还记得以前自己是用 vue-cli 2.0的版本 去构建的,毕竟里面有默认配置好的webpack配置,但现在很多小伙伴都已经用最新的 @vue/cli 4+ 版本去开发了,因为 @vue/cli 3 以上 的版本,比 2.0 的配置文件简洁了很多,当然你还得跟上时代的脚步,不然你就被淘汰了。
但自己搭建过的小伙伴都应该知道, @vue/cli 3 和 @vue/cli 4 默认没有vue.config.js文件,所以需要自己来创建配置。在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置,因为项目的配置比较多,这里就不分别介绍了,可以访问官方文档。
这里给出一个基本的:
module.exports = {
publicPath: "./", // 公共路径(必须有的)
outputDir: "dist", // 输出文件目录
assetsDir: "./static", // 静态资源存放的文件夹(相对于ouputDir) 一般都是static目录,不然默认的会是assets
lintOnSave:false, // eslint-loader 是否在保存的时候检查(果断不用,这玩意儿我都没装)
runtimeCompiler: false,// 我用的only,打包后小些
productionSourceMap: true, // 在生产环境会生产.map文件 设置false可以减小dist文件大小,加速构建
devServer: {
open: true, // npm run serve后自动打开页面
host: 'localhost',
port: 8085, // 开发服务器运行端口号
// hotOnly: true, // 热更新,
// proxy: {
// '/api': {
// target: '127.0.0.1',
// changeOrigin: true,
// pathRewrite: {
// '^/api': ''
// },
// },
// },
},
chainWebpack: () => {},
configureWebpack: () => {},
}
一、安装
如果在电脑上已经安装了 vue-cli 2.0 或者 @vue/cli 3 的话需要先卸载再重新安装
简要说明 | vue-cli 2.0 | @vue/cli 3 |
---|---|---|
安装 | npm install -g vue-cli | npm install -g @vue/cli |
卸载 | npm uninstall -g vue-cli | npm uninstall -g @vue/cli |
安装指定版本
标签:4.5,13,vue,cli,Vue,version,CSS,features From: https://www.cnblogs.com/RioTian/p/17129244.html