vuecli3的項目搭建，包含vue.config.js常用配置

1、卸載舊版本

npm uninstall vue-cli -g 或者 yarn global remove vue-cli

2、安裝cli3腳手架

npm install -g @vue/cli 或者 yarn global add @vue/cli

注意：

• 要求node版本 >=8.9
• vue查看版本號------vue -V
• node查看版本號-----node -v

3、安裝支持運行獨立的.vue文件

需安裝 npm install -g @vue/cli-service-gloabal
運行文件 vue serve <文件名>

4、新建項目

vue create <項目名字> //不支持駝峰
也可使用圖形化界面搭建 vue ui

5、安裝插件

vue add <插件名>

6、cli常用配置（vue.config.js）

const path = require('path');
const resolve = (dir) => path.join(__dirname,dir);
module.exports = {
    publicPath: './', //打包路徑，使用相對路徑生成的dist文件夾下的index可以打開
    // 輸出文件目錄
    outputDir: 'dist',
    //取消生成map文件
    productionSourceMap: false,
    // webpack-dev-server 相關配置
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: null, // 設置代理
        before: app => { }
    },
    chainWebpack: config =>{
        config.resolve.alias
            .set('@', resolve('src'))
            .set('common',resolve('src/common'))
            .set('utils', resolve('src/utils'))
    },
    // 第三方插件配置
    pluginOptions: {
        //1) vue-cli3 使用less全局變量
        //需安裝vue add style-resources-loader
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                path.resolve(__dirname,'./src/common/less/index.less'),
                //這個是加上自己的路徑，       
            ]
        }
    }
}