（vue2.0 案例3.0） 在vue-cli 项目中 需要知道常见的配置 防止入坑

一、配置打包后的文件路径 

进入config>index.js把assetsPublicPath:'/'改成'./';

build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',  
  productionSourceMap: false,
  productionGzip: false,
  productionGzipExtensions: ['js', 'css']
  bundleAnalyzerReport: process.env.npm_config_report
},

二、修改端口号8080为8888，防止端口冲突

进入config>index.js把修改port：8888 防止和其他端口冲突

dev: {
  env: require('./dev.env'),
  port: 8888,

三、配置proxyTable 解决开发环境中的跨域问题

proxyTable: {
    '/aaa':{
          target:'http://www.api.com/aaa',
          changeOrigin:true,
          pathRewrite:{
            '^/aaa':''
          }
        }
},

然后接口是这样子写的

this.$http.get('/aaa/menu/get_list').then(function(data){
  console.log(data)
})

四、打包要去掉mode：’history‘，否则打包不成功

export default new Router({
  // mode: 'history',//打包项目要把mode: history注释掉
    routes: [
        {
          path: '/',
          redirect:{name:'Into'}
        }
    ]
})

五、有些图片引用失败 在build\webpack.prod.conf.js 的限制limit注释掉

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    // limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},

六、去掉打包后不要的.map文件 在config\index.js 中把productionSourceMap:true改成

productionSourceMap:false

build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
  productionSourceMap: false,
  productionGzip: false,
  productionGzipExtensions: ['js', 'css']
  bundleAnalyzerReport: process.env.npm_config_report
},