A proxy server you need to configure multiple projects vue vue and nginx.
vue Configuration
Configuring vue.config.js of outputDir and publicPath
module.exports = {
outputDir: 'quilt', //打包目录，后面会上传到服务器
publicPath: '/quilt', //index.html文件 资源的引用路径前缀
｝
Configuring Vue Router 's base
const router = new VueRouter({
mode: 'history',
base: '/quilt/', //配置应用的基路径，配置了这个基路径后面nginx才能匹配请求
routes
})
nginx configuration
There are three projects under the assumption vue / home / dist directory: quilt , Website , Device
using the root configuration
server {
listen 80;
server_name localhost;
location /quilt {
root /home/dist;
index index.html;
try_files $uri $uri/ /quilt/index.html;
}
location /website {
root /home/dist;
index index.html;
try_files $uri $uri/ /website/index.html;
}
location /device {
root /home/dist;
index index.html;
try_files $uri $uri/ /device/index.html;
}
}
Use alias configuration
server {
listen 80;
server_name localhost;
location /quilt {
alias /home/dist/quilt;
index index.html;
try_files $uri $uri/ /quilt/index.html;
}
location /website {
alias /home/dist/website;
index index.html;
try_files $uri $uri/ /website/index.html;
}
location /device {
alias /home/dist/device;
index index.html;
try_files $uri $uri/ /device/index.html;
}
}
The difference is the use of root, root splicing request the full path, while using the alias, alias alternate route for matching (refer to / quilt, / website, / device, not the full path). Suppose that the requested path /quilt/abc.png,root splicing (/home/dist)/quilt/abc.png,alias is replaced (/home/dist/quilt)/abc.png. The end result is to get the correct file path, only the correct file path in order to be successful agents.
