@vue/cli 3 安装搭建及 webpack 配置

Posted 2022-08-09 chenjianbo

首先卸载旧版
1 npm uninstall vue-cli -g 
//or
2 yarn global remove vue-cli

再次安装

1 npm install -g @vue/cli   
2  //or
3 yarn global add @vue/cl

查看版本

vue --version
//or
vue -V

创建项目
vue create  my-project //项目名// Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。  //你必须通过   winpty vue.cmd create hello-world   启动这个命令。

创建时会提示  preset 预置项

可以选择默认配置

也可以选择手动配置

Please pick a preset:

> vue-router base (vue-router, vuex, less, babel, pwa, unit-mocha)  //配置过的预置项(preset)

 

二。webpack 配置

module.exports =
baseUrl: ‘/‘,
outputDir: ‘dist‘, //打包输出目录默认dist
configureWebpack: config =>
if (process.env.NODE_ENV === ‘production‘)
// 为生产环境修改配置...
else
// 为开发环境修改配置...
config.resolve.alias[‘~‘] = __dirname + path.join(‘/src/assets‘);

 

 

module.exports =
baseUrl: ‘/‘,
outputDir: ‘dist‘, //打包输出目录默认dist
// assetsDir: ‘bbbbb‘, //放置生成的静态资源 默认 ‘‘
chainWebpack: config => //会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
config.resolve.alias.set(‘~‘,path.join(__dirname, ‘..‘,‘src/assets‘))
　　　　　　,