通过vue-cli创建的项目设置配置文件

配置文件是基于node的，node不支持import语法。

 

publicPath

publicPath：之前叫baseURL，可以配置开发环境或生产环境的url

 

环境有两种：process.env.NODE_ENV   production   development

npm run serve是开发环境    npm run build是生产环境 ---> 打包测试看效果

 

常见配置如下：

publicPath:process.env.NODE_ENV === 'production'? 'http://www.abcd.cn':'/',

 

assetsDir

assetsDir:'asserts'   打包后的资源放入的文件夹 ---> 打包测试看效果

 

outputDir

outputDir:'./dist'   打包后生成的文件夹 ---> 打包测试看效果

 

runtimeCompiler

runtimeCompiler:false,   true的话，表示使用自己的内部模板，一般不使用  ---> 打包测试看效果

new Vue({

   template:”<h1>hello</h1>

}).$mount(“#app”)

 

开启多100K

productionSourceMap

打包后生成的map文件干掉。

productionSourceMap:false,  // 打包 不再使用sourcemap

 

chainWebpack

可以获取到webpack的配置 在增加一些自己的逻辑，配置目录别名 别名叫

chainWebpack:config=>{

        // 可以获取到webpack的配置 在增加一些自己的逻辑

        // 配置目录别名

        config.resolve.alias.set('_c',path.resolve(__dirname,'src/components'));

        config.resolve.alias.set('_v',path.resolve(__dirname,'src/views'));

},

 

configureWebpack

webpack配置，到时候会合并到默认的webpack中。

configureWebpack:{ // webpack-merge

     plugins:[],

     module:{}

},

 

devServer

开发服务 

devServer:{ // 开发 服务时使用

        proxy:{

            '/api/getUser':{

                target:'http://localhost:3000',

                pathRewrite:{

                    '/api':''

                }

            }

        }

},

 

服务：

server.js

let express = require('express');

let app = express();

app.get('/getUser',(req,res)=>{

    res.json({name:'hello'});

});

app.listen(3000);

 

使用：

Axios.get(“/api/getUser”).then()

 

没有代理会出现跨域问题。

 

pluginOptions

第三方插件配置。

  pluginOptions: {

      'style-resources-loader': {

        preProcessor: 'less',

        patterns: [

            path.resolve(__dirname,'src/assets/common.less')

        ]

      }

}

 

完整配置如下：

// 基于node的 node不支持import语法
// 默认环境变量 NODE_ENV production development
let path = require('path');
module.exports = {
    // baseURL
    publicPath:process.env.NODE_ENV === 'production'? 'http://www.abcd.cn':'/',
    assetsDir:'asserts',
    outputDir:'./dist',
    // 使用模版方式 一般不使用
    runtimeCompiler:false,
    // 打包 不再使用sourcemap
    productionSourceMap:false,
    chainWebpack:config=>{
        // 可以获取到webpack的配置 在增加一些自己的逻辑
        // 配置目录别名 别名叫+
        config.resolve.alias.set('_c',path.resolve(__dirname,'src/components'));
        config.resolve.alias.set('_v',path.resolve(__dirname,'src/views'));
    },
    configureWebpack:{ // webpack-merge
        plugins:[],
        module:{}
    },
    devServer:{ // 开发 服务时使用
        proxy:{
            '/api/getUser':{
                target:'http://localhost:3000',
                pathRewrite:{
                    '/api':''
                }
            }
        }
    },
    pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'less',
        patterns: [
            path.resolve(__dirname,'src/assets/common.less')
        ]
      }
    }
}