问题 部署后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. 利用LVS+Keepalived 实现高性能高可用负载均衡服务器
  2. 看代码的软件_软件著作权申请中常见的补正问题及解决方式
  3. 【译】Typeof null 的历史
  4. ccfb类会议有哪些_CCF 计算机会议排名
  5. Spring 基于注解(annotation)的配置之@Autowired注解
  6. 数据存储的问题(1)
  7. latex转为html效果好吗,latex2html
  8. numpy.loadtxt() 用法
  9. linux如何查看python的版本_Python基础知识:如何检查 Python 版本
  10. hsql转换oracle,Oracle To Hsql
  11. 移动安全-IOS越狱
  12. Win10系统修改开机密码
  13. PhotoDraweeView for Fresco
  14. 离阿里最近的机会,来了
  15. 智慧物流在大宗货运领域“落地”有多难?
  16. ns3中PointToPointDumbbellHelper类的引入方法(哑铃型网络模拟)
  17. 华兴数控g71外圆循环编程_华兴数控的循环指令是怎么定义的。也就是G71。G72。那样的。...
  18. 使用了未经检查或不安全的操作
  19. 园林专业毕业论文范文
  20. 详细解释什么是hadoop和spark,及其工作原理

热门文章

  1. 计算机丢失cximage.dll,cximagecrt.dll
  2. Python读取Excel中的数据
  3. 如何打开戴尔xps15屏幕触摸屏
  4. eclipse怎么创建css文件
  5. oracle数据插入覆盖,oracle数据库覆盖导入
  6. 笔记本电脑哪个品牌好 最新笔记本电脑排行榜前十名2023
  7. c语言添加miracl库,密码学C语言函数库——Miracl库快速上手中文指南(VC)
  8. 软件测试金字塔,软件质量思考(一)测试金字塔
  9. 你忽略的宝藏,iPhone 手机辅助功能
  10. 如何一个模型走天下?集成训练多数据集,打造通用目标检测模型方法详解