如果我们域名是直接指定到vue-cli build 后的dist目录，那么很好，什么都不用改！
但是如果这个域名之下并不只一个目录，需要用路径来区分不同的项目，比如存在 http://xxx.com/project1， http://xxx.com/project2 ...
那么此时，build出来的项目里面的引用全部都是/，也就是绝对路径到http://xxx.com/，这时，浏览器控制台就会出现一堆的红色404，找不到对应的引用！！
下面说一下解决方案,以目录名为project1为例：
步骤1。
修改 build/webpack.prod.conf.js
output: {
publicPath: '/' => '/project1/' 或者 直接写成 ‘http://xxx.com/project1’
}
修改完这个以后 index.html 里面的 js、css引用 404 的问题解决！
但是我们会发现，vue里面的background-image，image 和 css 里面的background-image 的引用还是找不到图片，解决方案如下！
步骤2。
vue里面的background-image：
在vue的data里面用require引入相对应的图片
如 image_bg: require('../../static/xxx.png'); 这里直接写该vue对于图片的相对路径
使用的时候 :style="{backgroundImage: 'url('+ image_bg + ')'}"
image 的 src 引用改为相对路径
image的src会按照步骤1的配置被换成绝对路径
css 里面的background-image 的引用改为相对路径引用
再更改build/utils.js文件中的 ExtractTextPlugin 的 options配置
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', //注意: 此处根据路径, 自动更改
fallback: 'vue-style-loader'
})
webpack打包会自动把background-image转换成bash64格式
解决了图片引用问题，发现我们原来的vue-router跳转都不对了！！他们都直接跳转到http://xxx.com/router了！！！页面都找不到了！！！！解决方案如下！！！！！
步骤3。
vue-router配置
修改router/index.js配置，添加base的路径，这个路径默认是‘/’，所以所有跳转都以绝对路径跳转到http://xxx.com/router了，so，我们把配置改成
base: '/project1',
这样我们所有的router跳转都不需要修改啦啦啦！
然后然后，我们放到服务器之后，会发现，router可以了，但是切换了一个router页面然后刷新，oh no！又是404 not found！这就涉及到服务器的ngnix的配置啦～
步骤4。
ngnix的配置
server {
listen 80;
server_name xxx.com;
root /xxx/xxx/xxx;
index index.html;
# access_log /var/log/testwx.log main;
#处理vue-router路径Start
#如果找不到路径则跳转到@router变量中寻找,找到了就默认进入index.html
try_files $uri $uri/ /project1/index.html;
location /project1/ {
try_files $uri $uri/ /project1/index.html last;
index index.html;
}
#处理vue-router路径End
}
网友评论