vue+elementUI项目打包后访问不到资源文件

一，路由不跳转

在项目打包之前在本地的路由跳转都是完美的，打包之后出现了路由无法跳转且报错。将router配置index.js文件中的mode：'history'改为hash

const createRouter = () => new Router({
  // mode: 'history', // 需要服务端支持
  mode: 'hash',
  base: 'lighthouse',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

二，背景图片background不显示（找不到文件）

将config > index.js 配置文件中 assetsPublicPath的值更改为相对路径

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', // 将绝对路径更改为相对路径

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

三，element-ui组件图标不显示路径配置

将build > utils.js 配置文件添加publicPath: '../../'， 原因是vue项目打包后样式目录结构变为static/css 

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',  // 解决element-ui中组件图标不显示问题
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

四，vue打包后iconfont引入路径不正确

打包前：路径是http://localhost:8080/static/...
打包后：路径是/dist/static/css/static/fonts/iconfont.1a028ec.woff

百思不得其解的是-上面文件的实际位置在：/dist/static/fonts/iconfont.1a028ec.woff

一顿网上搜索终于找到一个有用的答案：参考官方文档url-loader

当文件的大小小于limit的值时，使用base64进行转码，你可以在打包好的css中进行查证，看所引用的字体和图片是不是base64格式的，如果大于limit的值，就使用file-loader进行解析，不会使用base64，而是采用路径引入。

修改

build > webpack.base.conf.js >

完