vue项目打包空白页,elementUI失效等问题(纯手打,转载请注明出处,谢谢)

vue项目
打包vue开发的项目在上传服务器的时候 只提交 dist文件
其他所有源码都不需要提交(和码云,github等不一样)
打包命令 npm run build

打包踩过的坑

分两大块（按路由模式）

第一种 hash （默认）

①出现空白页
config => index => bulid对象中 设置assetsPublicPath='./'
②背景图 无法解析
更改build=>utils.js(大概47行的位置)=>

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../' //解决打包之后背景图无法解析路径

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

第二种 history（hash打包的配置不需要设置到 history中）

打包之后空白报错

swiper.min.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
app.4b9eb7c85cdd8e9e259af71e2f3709e7.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
manifest.2ae2e69a05c33dfc65f8.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
vendor.2da1b8e13ef886da2f42.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
app.218611c18e1a8a1a7b1a.js:1 

不需要更改前端代码，需要后端进行配置
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

Apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

除了 mod_rewrite，你也可以使用 FallbackResource。

#nginx
location / {
  try_files $uri $uri/ /index.html;
}

==================================================
打包的时候 需要你注意跨域问题
上线之后跨域问题 是后端（服务器端 nginx等）去解决 跨域问题
本地出现跨域问题 这个一般是在写项目调用接口的时候用的
要在config=>index中
设置proxyTable:{
'/api':{
target:'你要解决跨域的地址',
changeOrigin:true,
pathRewrite:{
'^/api':"你要解决跨域的地址"
}
}
}