起初在创建vue项目之后，我以为如果不是引入外部插件，项目里面的配置应该是很少改的，而且里面东西很杂，新手一眼看去可能就感觉头大。后来在做项目的时候发现，害怕配置真的是一个很大的缺点，必须要克服，所以我将vue项目几个基本的配置修改总结了一下，暂时想到的就这么多。。。

项目创建初期：

项目创建后，修改的配置是后台接口代理，在config文件夹的index.js里面，我只展示几个常修改的属性其他不做注释

dev: {

host: "127.0.0.1",//开发环境本地端口可以为本机ip或者localhost

port: 8080,//端口号

proxyTable: {

'/api': {

target: 'http://www.abc.com', //目标接口域名

changeOrigin: true, //是否跨域

pathRewrite: {

'^/api': '/api' //重写接口

}

},

}

首先，在ProxyTable模块中设置了‘/api’，target中设置服务器地址，也就是接口的开头那段地址，例如‘172.0.0.1’，然后我们在调用接口的时候，就可以全局使用‘/api’，这时候‘/api’的作用就相当于‘172.0.0.1’，比如接口的地址是‘172.0.0.1/login’，我们就可以在ajax里面使用‘/api/login’来当作接口名字，pathRewrite在这里的作用，相当于是替代‘/api’。

运行项目可能会白屏，需要在本文件build对象下面 将assetsPublicPath: "/",修改为assetsPublicPath: "./"(在网上有异议：解决 vue-cli index.js dev 配置中 assetsPublicPath 的值不能填 "./" 的问题​www.jianshu.com

)，但是确实解决了文件js和css加载的问题。

向后打包运行：

直接打包运行vue项目的话，里面的静态资源还有css样式，在服务器里面部署可能会找不到，需要修改build里面的配置

首先是utils.js里面，判断options.extract的时候加入代码 publicPath:'../../',

if(options.extract) {

returnExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader',

publicPath:'../../',//打包新加

})

}else{

return['vue-style-loader'].concat(loaders)

}

然后是webpack.prod.conf.js文件里面output中加入 publicPath:'./',

output: {

path: config.build.assetsRoot,

publicPath:'./',//打包新加

filename: utils.assetsPath('js/[name].[chunkhash].js'),

chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

},

接下来是mode模式的运用,mode: 'history',的时候页面需要处理白屏问题

使用vue框架时，修改样式不生效，可以使用全局css样式修改(不适用scoped)，也可以使用deep方式或者样式穿透(>>>)：

方式一:

.fuck {

// ...

}

方式二:

.select {

width: 100px;

/deep/ .el-input__inner {

border: 0;

color: #000;

}

}

方式三:

.select {

width: 100px;

>>> .el-input__inner{

border: 0;

color: #000;

}

}

最后在布局过程中高度不需要获取，当前页面高度可以用100vh表示，内部元素高度可以使用百分比。