Vue项目的构建

1. 安装vue-cli

   vue安装vue-cli官网文档

2. 新建vue-config.js 文件,设置项目基本配置

   //项目配置
   
   const environment = require("./src/config/environment");//引入环境配置文件
   
   const path = require("path"); //引入文件路径处理插件(node)
   
   const resolve = dir => {
       return path.join(__dirname, dir)
   }
   //对外输出模块
   module.exports = {
       outputDir: environment.NODE_ENV,//输出文件目录
       publicPath: '/',
       lintOnSave: false,// eslint-loader是否在保存的时候检查
       productionSourceMap: false,//不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
       chainWebpack:config=>{     // 自定义快捷文件路径
           config.resolve.alias
               .set("@",resolve('src'))
               .set("_a",resolve("src/assets"))
               .set('_c',resolve('components'))
       },
       //css预处理设置
       css:{
           loaderOptions:{  
               less: {
                   javascriptEnabled: true,
                 }
           }
       },
       //修改环境配置
       configureWebpack: config => { 
           if(process.env.NODE_ENV === 'production'){
               //设置生产环境
               // config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
           }
           config.externals = {
               'AMap': 'AMap',// 高德地图配置
             }
       },
        // webpack-dev-server 相关配置
        devServer:{
            port:'9012',//端口
            //设置代理
            proxy:{
           	'/rng': {     //这里最好有一个 /
   	            target: 'http://45.105.124.130:8081',  // 后台接口域名
   	            ws: true,        //如果要代理 websockets，配置这个参数
   	            secure: false,  // 如果是https接口，需要配置这个参数
   	            changeOrigin: true,  //是否跨域
   	            pathRewrite:{
                   	'^/rng':''
              		 }
          		 }
            }
        }
   }
   

3. 配置环境文件environment.js

   // 开发环境默认设置
   let NODE_ENV = 'development'; //默认环境
   let materialUrl = '/template';//图片等资源路径代理
   let downloadStaffUrl = '';
   let api = '';
   let pubKey = '';
   
   if(process.env.NODE_ENV != 'development'){
       // 非开发环境设置
       materialUrl = '/api/template';
       downloadStaffUrl = '/api/';
       api = '/api';
       // 环境判断
       switch (process.env.VUE_APP_TITLE){
           // 生产环境
           case 'production':  
               NODE_ENV = 'production';
               pubKey = '';
               break;
           //测试环境
           case 'test': 
               NODE_ENV = 'test';
               break;
           //体验环境
           case 'experience':
               NODE_ENV = 'experience';
               pubKey = '';
               break;
           //开发环境
           case 'dev':
               NODE_ENV = 'dev';
               break;
           case 'alpha':
               NODE_ENV = 'alpha';
               materialUrl = '/template';
               downloadStaffUrl = '';
               api = '';
               break;
           default:
               NODE_ENV = 'test';
               break;
   
       }
   }
   
   const nodeObj = {
       NODE_ENV:NODE_ENV, //环境
   
       materialUrl:materialUrl, //图片等资源路径代理
       downloadStaffUrl:downloadStaffUrl, //下载等路径代理
       api:api, //打包之后要加的路径代理
       pubKey:pubKey, //登录秘钥
   
   }
   
   module.exports = nodeObj;