vue history模式部署到nginx服务器

1.如果是一级目录直接部署到根目录

2.如果是子级目录则需要用到nginx服务代理

#nginx.conf 配置

server {
	listen 80;
	server_name localhost;
	
	location / {
        # 打包目录
        root /home/app/dist; 
        #一级目录项目
        try_files $uri $uri/ /index.html;
	}
	
	# 二级目录项目
	location ^~/mobile/ {
		proxy_redirect off;
		proxy_set_header Host $host;
		proxy_pass http://127.0.0.1:8181/;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

	}
}
server {
	listen 8181;
		
	location / {
        # 打包目录
        root /home/app/mobile/dist; 
        #二级目录代理项目
        try_files $uri $uri/ /index.html;
	}
	
}

//vue 配置一级路由index.js

const router = new VueRouter({
    mode: 'history',
    base: '/',
    routes
})

——————————————————————————————————————————————————————

//vue 配置子级路由index.js

const router = new VueRouter({
    mode: 'history',
    base: '/mobile/',
    routes
})

// 一级目录 vue.config.js

module.exports = {
    publicPath: '/',
    outputDir: 'dist', // 打包时生成的生产环境构建稳健的目录
    assetsDir: 'assets', // 静态资源的目录
    ......
}

————————————————————————————————————————————————————————————————————————————————————————

// 二级目录 vue.config.js

module.exports = {
    publicPath: '/mobile/',
    outputDir: 'dist', // 打包时生成的生产环境构建稳健的目录
    assetsDir: 'assets' // 静态资源的目录
    ......

}