vue项目history模式打包部署及nginx配置(vue-cli4.0)

一、打包部署到根路径
vue.config.js中配置publicPath为相对路径 ‘./’

module.exports = {
  publicPath: './', 
}

路由配置

export default new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,  //BASE_URL 和 vue.config.js 中的 publicPath 选项相符
  routes
});

打包完成的代码放到nginx项目根目录my-project中，配置nginx：conf/nginx.conf

location / {
	root /my-project;
	#增加下句，如果URL匹配不到任何静态资源，则应该返回 index.html 页面即app依赖的页面
	try_files $uri $uri/ /index.html;    
}

二、打包部署到子路径
配置publicPath，生产环境配置为子目录名

module.exports = {
	publicPath: process.env.NODE_ENV === 'development'
      ? './'
      : '/sub-project/',
}

路由配置

export default new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,  //BASE_URL 和 vue.config.js 中的 publicPath 选项相符
  routes
});

打包完成的代码放到nginx项目根目录my-project中的子目录sub-project中，配置nginx：

location / {
	root /my-project;
}
location ^~ /sub-project/ {
	root /my-project;
	#如果URL匹配不到任何静态资源，则应该返回 index.html 页面即app依赖的页面
	try_files $uri $uri/ /sub-project/index.html;    
}