问题 部署后element-icon 请求资源404

解决

修改 vue.config.js (添加前缀路径)

vue.config.js完整代码

'use strict'
const path = require('path')
const _publicPath = '/Pledged/'
const defaultSettings = require('./src/settings.js')function resolve(dir) {return path.join(__dirname, dir)
}const names = defaultSettings.title // page title
const { name } = require('./package');const port = 3004 // dev port// 所有配置项的说明: https://cli.vuejs.org/config/
module.exports = {/*** 如果您计划在子路径下部署站点,则需要设置publicPath,* 在大多数情况下请使用'/' !!!* https://cli.vuejs.org/config/#publicpath*/publicPath: '/Pledged/',outputDir: 'dist',assetsDir: 'static',transpileDependencies: ['@antv/g6'], // antv.g6lintOnSave: process.env.NODE_ENV === 'development',productionSourceMap: false,devServer: {port: port,open: true,overlay: {warnings: false,errors: true},// 关闭主机检查,使微应用可以被 fetchdisableHostCheck: true,headers: {'Access-Control-Allow-Origin': '*',},proxy: {[process.env.VUE_APP_BASE_API]: {target: 'http://114.113.127.115:9009/prod-api/', // 阿里云地址changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}}}},configureWebpack: {// 在webpack的name字段中提供应用程序的标题,以便可以在index.html中访问它以插入正确的标题。name: names,resolve: {alias: {'@': resolve('src')}},output: {library: 'inside-grade2',libraryTarget: 'umd', // 把微应用打包成 umd 库格式jsonpFunction: 'webpackJsonp_inside-grade2',},},chainWebpack(config) {config.plugins.delete('preload') // TODO: need testconfig.plugins.delete('prefetch') // TODO: need test// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()
//解决elementUI icon部署不显示config.module.rule('fonts').use('url-loader').loader('url-loader').tap(options => {options['limit'] = 4096options['publicPath'] = _publicPath    //添加路径return options;})// set preserveWhitespaceconfig.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {options.compilerOptions.preserveWhitespace = truereturn options}).end()config// https://webpack.js.org/configuration/devtool/#development.when(process.env.NODE_ENV === 'development',config => config.devtool('cheap-source-map'))config.when(process.env.NODE_ENV !== 'development',config => {config.plugin('ScriptExtHtmlWebpackPlugin').after('html').use('script-ext-html-webpack-plugin', [{// `runtime` must same as runtimeChunk name. default is `runtime`inline: /runtime\..*\.js$/}]).end()config.optimization.splitChunks({chunks: 'all',cacheGroups: {libs: {name: 'chunk-libs',test: /[\\/]node_modules[\\/]/,priority: 10,chunks: 'initial' // only package third parties that are initially dependent},elementUI: {name: 'chunk-elementUI', // split elementUI into a single packagepriority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or apptest: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm},commons: {name: 'chunk-commons',test: resolve('src/components'), // can customize your rulesminChunks: 3, //  minimum common numberpriority: 5,reuseExistingChunk: true}}})config.optimization.runtimeChunk('single')})}
}

vue 打包部署子目录后 elementUI icon 图标不显示相关推荐

  1. Elementui icon图标不显示

    文章目录 需求 原理 实现 效果 icon图标链接 需求 需要实现显示icon图标 原理 不显示的原因是项目中引入的element-ui的版本过低了,低版本的icon中没有代码中需要的图标, 在低版本 ...

  2. vue打包成app后,背景图片不显示

    问题: 在使用npm run build 打包后, 如果在页面中使用img标签引入,打包后的路径是由index.html开始访问的,真正访问的是Static/img/图片名, 是正确的, 但是写在cs ...

  3. vue打包部署服务器,背景图片显示空白

    vue打包部署服务器后,往往会出现部分背景图片显示空白的情况,部分就说明只是打包过程中的图片路径问题: 在build 文件夹中找到 utils.js文件加上这行代码即可:publicPath: '-/ ...

  4. vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题

    大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后 ...

  5. vue 打包路由报错_急急急急,vue打包部署后,路由无法跳转

    求助 vue打包部署后首页可以正常访问,可是一但点击下一步:就没反应:控制台报错: (打包后的index.html文件和JS文件分别部署在服务器的不同文件夹下,但是在index.html文件中的lin ...

  6. vue 打包部署在 nginx服务中,以及出现的一些问题

    首先来说操作步骤 前提: 1.你已经安装/下载好 nginx 2.你的vue 项目已经打包完成,并得到了 dist 文件夹 部署开始: 1.vue 项目打包,在控制台输入 npm run build ...

  7. Vue打包部署IIS无法请求

    ARRv3_0 下载安装URl重写URL Rewrite 第一步安装,IIS配置,打开 第二步,点击 Server Proxy Settings 第三步,选中 应用 Vue打包部署 配置URL重写规则 ...

  8. Vue打包部署到服务器-找不到静态资源404错误

    Vue打包部署到服务器-找不到静态资源404错误 参考:https://blog.csdn.net/AnnaF/article/details/105709569 问题描述 在本地运行正常,但是使用n ...

  9. vue打包放到java中启动_Springboot+Vue打包部署总结

    文章目录 一.Vue打包+部署 1. 打包(npm run build:prod) 2.nginx部署前端vue项目 二.Springboot打包+部署 1.打包(mvn clean package) ...

最新文章

  1. 全球10大SSL证书品牌对比
  2. 一个具有20位地址和32位字长的存储器_存储器层次结构(三):高速缓存
  3. 启明云端分享|ESP32-C3模块入门应用
  4. 网站301重定向 解决方法
  5. 第一个python爬虫_Python爬虫01——第一个小爬虫
  6. node 微信红包 证书出错,请登录微信支付商户平台下载证书
  7. stripslashes和addslashes的使用方法
  8. 认证杯网络挑战赛C题破局共享汽车
  9. 江西科技师范大学泰豪校区计算机专业,扎心了!比取经还艰难的大学路,南昌居然占了这么多……...
  10. win7系统中安装破解版Charles教程 基本使用方法汇总
  11. 从代码和底层探究Synchronized锁实现
  12. 【零基础-1】PaddlePaddle学习Bert
  13. 捕捉95%的习惯思维,让用户对你的产品上瘾
  14. java 计算个人所得税
  15. Java学生信息管理系统——管理员登录模块(简单易上手)
  16. c++基本输入输出 输出不同精度的PI(程序给出的PI值为 3.14159265358979323846)。
  17. 如何在C++中方便的将float、int等类型数据转换成string类型,并利用ROS中的std_msg/String发布出去
  18. BP神经网络预测公路运力
  19. 为什么将指令cache和数据cache相分离?
  20. MyEclipse 安装TFS插件详解

热门文章

  1. .NET常用类库知识
  2. vscode vue代码没提示 vetur
  3. dell xps u盘启动设置
  4. 山外多功能调试助手_吃鸡多功能画质助手
  5. 得帆创始人张桐:《华为数字化转型之道》系列解读之四
  6. lnx 高效搜索引擎,FastDeploy 推理部署工具箱,图神经网络基础公开课,AI前沿论文 | ShowMeAI资讯日报
  7. 开复老师自传《世界因你不同》!
  8. java关于微信小程序AES解密
  9. JVM 类加载机制与加载过程
  10. 【PS | 学习】明信片的制作