vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

1.安装
npm install -g @vue/cli
2.检查安装
vue -V  
3.创建项目
vue create project_name 
出现下图信息

打包后在本地预览,你需要启动一个node服务：
1.npm install -g serve  //全局安装服务
2.serve -s dist   // 启动服务预览
获取当前的环境:
console.log(process.env.VUE_APP_URL)

const path = require('path');

module.exports = {
    publicPath:'/',    // 公共路径
    outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 不同的环境打不同包名
    css: {  // 一次配置，全局使用，这个scss 因为每个文件都要引入
        loaderOptions: {
            sass: {
                data: `@import "./class="lazy" data-src/assets/hotcss/px2rem.scss";`
            }
        }
    },
    lintOnSave:false,  // 关闭eslint
    productionSourceMap:true,  // 生产环境下css 分离文件
    devServer:{   // 配置服务器
        port:8081,
        open:true,
        https:false,
        overlay: {
            warnings: true,
            errors: true
        }
    },
    configureWebpack:{  // 覆盖webpack默认配置的都在这里
        resolve:{   // 配置解析别名
            alias:{
                '@':path.resolve(__dirname, './class="lazy" data-src'),
                '@h':path.resolve(__dirname, './class="lazy" data-src/assets/hotcss'),
                '@s':path.resolve(__dirname, './class="lazy" data-src/assets/style'),
                '@i':path.resolve(__dirname, './class="lazy" data-src/assets/images'),
            } 
        }
    }
}