终于成功了,折磨了我一周,最终改动如下:
针对webpack配置:
output: {
publicPath: '/myproject/'
}
针对file-loader
,主要问题是css中引入的图片加载不出来,需要在file-loader
的option中加如下配置:
loader: 'file-loader',
options: {
esModule: false,
outputPath: 'image',
publicPath: '../myproject/image',
}
//我的图片最终全部打包放在了dist/image下
其中最折磨我的是一个我万万没想到的地方,需要在webpack指定的index.html
的head中添加如下标签:
<base href="/myproject/" />
其实我一直发现,后台服务当收到请求时,一直把myproject当成api地址的一部分,其实它是域名的一部分,加的这个html标签其实就是解决了这个问题
最后是nginx配置,其实没有太多的配置,都很基础
location ~* /myproject {
rewrite ^/myproject/?(.*)$ /$1;
}
location / {
try_files $uri $uri/ /index.html?$args;
}
意思是如果请求地址以/myproject
开头,就去掉/myproject
,进而进入第二个location项,try_files主要是配合前端的vue-router的history
模式去掉#用的。
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…