vue 项目的一些配置问题

解决插件图标不显示问题

# build/utils.js

        if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            publicPath: '../../'      // * 添加
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
         }

 解决打包之后部分css样式失效，或者不能成功打包（css为引入插件中的）

  ---> 在build/webpack.prod.config.js中 注释掉下面代码（下面代码作用是为了消除不同组件之间可能重复的css）

new OptimizeCSSPlugin({
       cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
         : { safe: true }
     }),

  ---> 在build/utils中添加 minimize:true

const cssLoader = {
        loader: 'css-loader',
        options: {
          sourceMap: options.sourceMap,
          minimize:true  // * 添加
        }
      }

 jquery 配置

    在build/webpack.base.config.js中 添加一下代码

var webpack = require('webpack');

    在module.exports最后添加下面代码

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery"
        })
    ]

   

css路径问题

    在build目录下新建一个cssPathResolver.js，内容如下：

module.exports = function (source) {
    
      if (process.env.NODE_ENV === 'production') {
        return source.replace('__webpack_public_path__ + "static', '"..')
      } else {
        return source
      }
    
    }

    具体要替换的内容可能得自己调整下，这个loader要用在被css引入的资源上，而不是css，
    在webpack.base.conf.js里面修改下就行了    
  

 {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loaders: [
        {
          loader: path.resolve(__dirname, 'cssPathResolver')
        },
        {
          loader: 'url-loader',
          query: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),  // 根据需求修改fonts<icons,img...>
          }
        }
      ]
    }

访问打包后的项目，输入路径后，页面加载空白

这时会有两类问题，都是路径问题。

    1.一个是css,js,ico等文件加载不到，是目录里少了dist,打开页面时一片空白
        解决办法：
        config/index.js文件的build->assetsPublicPath的默认值改为 './'
        assetsPublicPath：资源的根目录。这个是通过http服务器运行的url路径。因为webapp和static中间还有层dist,所以要用'./'
    
    2.另一个就是单纯的在背景图使用相对路径导致加载不到图片 《同第一个配置》
        引用的时候没发使用@/../static   只能使用../../../static
        这个时候，打包过后的登陆页面引用图片路径错误，多了一个/static/css
        
        解决办法：
        build/utils.js文件的ExtractTextPlugin.extract=>新增 publicPath:"../../"
        publicPath:重写该加载器(loader) css 的 publicPath 的设置
        

 安装font-awesome

    npm install less less-loader css-loader style-loader file-loader font-awesome --save
    在main.js里导入
    import 'font-awesome/css/font/font-awesome.min.css'