vue配置本地开发环境

打包上线后出现的各种问题汇总

1.图片样式加载不了

进入build/utils.js，配置如下,

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'    //修改的地方
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

进入build/webpack.prod.conf.js，配置如下,

devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    publicPath:'./',            //修改的地方
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

2.打包上线后加载速度慢

cnpm install --save-dev [email protected] 安装这个工具
然后进入config/index.js ，把下面这个参数设置为true

productionGzip: true, **//修改的地方**
productionGzipExtensions: ['js', 'css'],

开启 nginx gzip ,在 nginx.conf 配置文件中配置

http {
	gzip  on;
    gzip_static on;
    gzip_disable "msie6";
    gzip_min_length 100k;#不压缩临界值
    gzip_buffers 4 16k;
    gzip_comp_level 3;#压缩级别
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
 }

后台nginx开启gzip模式访问，浏览器访问项目，自动会找到 .gz 的文件。加载速度明显提高。

3.浏览器选项卡小图标

开发环境配置：进入build/webpack.dev.conf.js 找到下面代码

plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: 'src/assets/img/favicon.ico'  **//修改的地方**
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]

生产环境配置：进入build/webpack.prod.conf.js 找到下面代码

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      favicon: 'src/assets/img/favicon.ico'  **//修改的地方**
    }),
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),