vue+elementUI项目打包后访问不到资源文件_vue3-element-admin打包后访问不了js

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 > 
build文件夹下webpack.prod.conf.js文件改成 output: { publicPath: './', path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash]....
                                    1.打完包，运行index.html访问不到资源 Failed to load resource: net::ERR_FILE_NOT_FOUND
原因是 默认的 vue-admin-template 中的 vue.config.js 中的 publicPath 是 ‘/’,  这样会导致打包出来的js都是 / 开头的，即是根路径下的文件，但我们往往不需要这样，修改为 ‘./’， 意思为当前路径下。
2.静态资源加载成功后，点击登录页面不跳转问题
问题原因：
大部分vue 前段项目 会使用 js-cook
                                    Vue打包后生成的dist文件中的index.html，双击在浏览器中打开后发现一片空白，打开控制台有很多报错：“Failed to load resource: net::ERR_FILE_NOT_FOUND”。2. 将index.html中资源引用的绝对路径改为相对路径；这是因为dist文件是需要放在服务器上运行的，资源默认放在根目录下。可以打开浏览器在localhost:8080中查看了。，此时可以双击index.html在浏览器中正常访问了！指向磁盘根目录，所以找不到引用的文件。
electron-vue加载 .node文件在开发环境可以正常运行，但是打包以后就出现了问题，提示加载不到资源。排查之后发现通过webpack把文件压缩成render.js之后，node文件的加载路径竟然写死成了工程所在的绝对路径。
修改 .electron-vue目录下webpack.renderer.config.js文件
  module: {
    rules: [
        test: /\.node$/,
        use: 'node-loader'