方法一: vue.config.js中配置图片路径
const publicPath = process.env.NODE_ENV === 'production' ? '页面部署地址' : 'http://localhost:18091/'
module.exports = {
publicPath: '',
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
jsonpFunction: `webpackJsonp_${name}`
},
plugins: [
new CopyWebpackPlugin([
{
from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
to: './libs/EasyPlayer/'
},
{
from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml',
to: './libs/EasyPlayer/'
},
{
from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
to: './libs/EasyPlayer/'
}
])
]
},
// 添加下方配置就能解决
chainWebpack: (config) => {
const fontRule = config.module.rule('fonts')
fontRule.uses.clear()
fontRule
.use('file-loader')
.loader('file-loader')
.options({
name: 'fonts/[name].[hash:8].[ext]',
publicPath
})
.end()
const imgRule = config.module.rule('images')
imgRule.uses.clear()
imgRule
.use('file-loader')
.loader('file-loader')
.options({
name: 'img/[name].[hash:8].[ext]',
publicPath
})
.end()
}
}
方法二:vue.config.js中配置,遇到项目部署后内外网两个访问地址的时候可以用,第一种方式只能设置一个publicPath路径,如果有两个页面访问地址图片没办法满足
module.exports = {
publicPath: "",
transpileDependencies: ['vue-puzzle-verification','@xunlei/vue-context-menu'],
devServer: {
// host: 'localhost'
//设置跨域
port: "19712", // 端口号
overlay: {
warnings: false,
errors: true,
},
headers: {
'Access-Control-Allow-Origin': '*',
},
},
configureWebpack: (config) => {
config.externals = {
AMap: "AMap",
};
},
// 调整乾坤子应用打包格式
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
jsonpFunction: `webpackJsonp_${name}`,
},
plugins:[
new CopyWebpackPlugin([
{
from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
to: './libs/EasyPlayer/'
},
{
from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml',
to: './libs/EasyPlayer/'
},
{
from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
to: './libs/EasyPlayer/'
}
])
]
},
// 添加下方代码可以解决图片不加载问题
chainWebpack: (config) => {
config.module
.rule('fonts')
.test(/\.(ttf|woff)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.tap(options => {
options = {
...options,
limit: 99999999,
name: 'fonts/[name].[hash:8].[ext]',
}
return options
})
.end()
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.tap(options => {
options = {
...options,
limit: 99999999,
name: 'img/[name].[hash:8].[ext]',
}
return options
})
.end()
}
};