vue前台访问springboot项目图片,路径无法访问到图片文件,需要做下地址转换,推荐在springboot中配置虚拟路径,但是如果很多地方已经配置的磁盘路径,修改的地方比较多,可以使用nginx做代理,通过nginx拦截图片请求来处理,也是不错的。
nginx.conf配置:
server {
listen 8071; #此端口不能和VUE项目端口重复!!!
client_max_body_size 1024M;
location /upload/ {
root D:/lsbms; #此处图片路径为 D:/lsbms/upload/xxx.jpg
index index.html index.htm;
autoindex on;
}
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
root D:/lsbmse/upload;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
location /api/ { #下面的代码没有什么用,我放着玩的
rewrite ^/api/(.*) /$1 break;
proxy_pass http://localhost:8091;
}
location /ips/ {
rewrite ^/ips/(.*) /$1 break;
proxy_pass http://localhost:8095;
}
}
VUE项目路径转发index.js:
var path = require('path')
var os = require('os'), ip = '', ifaces = os.networkInterfaces() // 获取本机ip
for (var i in ifaces) {
for (var j in ifaces[i]) {
var val = ifaces[i][j]
if (val.family === 'IPv4' && val.address !== '127.0.0.1') {
ip = val.address
}
}
}
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: false,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8070,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
// target: 'http://'+ ip +':8091', // 接口域名 开发
target: 'http://'+ ip +':8091', // 接口域名 开发
secure: true, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: { // 如果接口本身没有api的路径,那么这里将发送到后端的请求重写为没有api的路径
'^/api': '/'
}
},
'/ips': {
target: 'http://'+ ip +':8095', // 接口域名 开发
secure: true, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: { // 如果接口本身没有api的路径,那么这里将发送到后端的请求重写为没有api的路径
'^/ips': '/'
}
},
'/upload': { //主要看这里!!!
target: 'http://'+ ip +':8071', // 接口域名 开发
secure: true, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: { // 如果接口本身没有api的路径,那么这里将发送到后端的请求重写为没有api的路径
'^/upload': '/upload'
}
},
},
cssSourceMap: false
}
}
小心提醒:
nginx挂多了,不要再试了
清缓存!重启电脑!
有学到东西,点个赞哦,不然祝你天天写bug,~_~
-------------------------------------------------- 懒懒的分隔线 --------------------------------------------------
自己玩玩 ,随便看看