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

问题部署后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 图标不显示相关推荐

Elementui icon图标不显示
文章目录需求原理实现效果 icon图标链接需求需要实现显示icon图标原理不显示的原因是项目中引入的element-ui的版本过低了,低版本的icon中没有代码中需要的图标, 在低版本 ...
vue打包成app后，背景图片不显示
问题: 在使用npm run build 打包后, 如果在页面中使用img标签引入,打包后的路径是由index.html开始访问的,真正访问的是Static/img/图片名, 是正确的, 但是写在cs ...
vue打包部署服务器，背景图片显示空白
vue打包部署服务器后,往往会出现部分背景图片显示空白的情况,部分就说明只是打包过程中的图片路径问题: 在build 文件夹中找到 utils.js文件加上这行代码即可:publicPath: '-/ ...
vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题
大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件打开此文件后 ...
vue 打包路由报错_急急急急，vue打包部署后，路由无法跳转
求助 vue打包部署后首页可以正常访问,可是一但点击下一步:就没反应:控制台报错: (打包后的index.html文件和JS文件分别部署在服务器的不同文件夹下,但是在index.html文件中的lin ...
vue 打包部署在 nginx服务中，以及出现的一些问题
首先来说操作步骤前提: 1.你已经安装/下载好 nginx 2.你的vue 项目已经打包完成,并得到了 dist 文件夹部署开始: 1.vue 项目打包,在控制台输入 npm run build ...
Vue打包部署IIS无法请求
ARRv3_0 下载安装URl重写URL Rewrite 第一步安装,IIS配置,打开第二步,点击 Server Proxy Settings 第三步,选中应用 Vue打包部署配置URL重写规则 ...
Vue打包部署到服务器-找不到静态资源404错误
Vue打包部署到服务器-找不到静态资源404错误参考:https://blog.csdn.net/AnnaF/article/details/105709569 问题描述在本地运行正常,但是使用n ...
vue打包放到java中启动_Springboot+Vue打包部署总结
文章目录一.Vue打包+部署 1. 打包(npm run build:prod) 2.nginx部署前端vue项目二.Springboot打包+部署 1.打包(mvn clean package) ...

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

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

最新文章

热门文章