Vue CLI 3.0踩坑记录

vue cli 3.0和之前的脚手架不太一样，记录下新特性及踩坑记录。以下均在MacOS环境下进行。

官网：https://cli.vuejs.org/zh/guide/installation.html

安装

vue-cli包名称由vue-cli改成了@vue/cli，如果全局安装过旧版本的vue-cli，先卸载。遇到permissions denied等权限问题，命令前加sudo。

1、卸载

$ npm uninstall vue-cli -g
# or
$ yarn global remove vue-cli

2、安装

$ npm install -g @vue/cli
# or
$ yarn global add @vue/cli

创建项目

$ vue create example.project

可以选择默认配置，也可以手动配置。

切换包管理器、npm镜像源

可通过~/.vuerc（windows路径C:/user/administrator）文件来设置包管理器和镜像源。.vuerc文件是在初次使用vue create时配置生成的，之后会按照第一次选择的配置进行项目创建。

{
  "useTaobaoRegistry": true,
  "packageManager": "yarn"
}

Webpack配置

vue-cli3不再生成webpack.xx.config.js等文件，而是内置了webpack配置。如果需要调整配置，在项目根目录新建vue.config.js，通过configureWebpack或chainWebpack等选项修改配置，该对象会被webpack-merge合并入最终的webpack配置。

1、配置路径别名，若配置完不起作用，重启项目。

const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
const APP_PATH = resolve('src');
const alias = (dir) => path.join(APP_PATH, dir);

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', APP_PATH)
            .set('@components', alias('components'))
            .set('@pages', alias('pages'));
    }
};

2、支持chrome源文件映射，方便调试

module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') {
            config.devtool = 'eval-source-map';
        }
    }
};