Nginx配置vue打包后的页面

date
Apr 19, 2022
slug
Nginxasd
status
Published
tags
nginx
vue
summary
asdasdas
type
Page
先看一下这个

Vue打包后访问

1.首先配置vue的路径 配置vue.config.js
module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
   ## 主要是这个 这个admin是要对照 loaction的
  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/admin',
  outputDir: 'dist',
  assetsDir: 'static',
  ...
}
配置nginx
location  /admin {
alias  /server/admin/;
index index.html;
try_files $uri $uri/ /index.html;
}
创建目录 要注意,index.html页面要在admin文件夹根目录
mkdir -p /server/admin
unzip xxx.zip
cp -r xx/* .
nginx -s reload
如果上面的方式不行,就换一种
如果h5访问地址是 https://home.remember5.com/h5
比如现在后台publicPath想定义为/page
需要更改两个配置
nginx
location /admin/ {
	alias   /server/eladmin-admin; # 服务器存储路径地址
	index  index.html;
	try_files $uri $uri/ /admin/index.html;
}
router
export default new Router({
	// mode: 'hash',
	mode: 'history',
	base: '/admin', // 这个位置一定要改掉
	scrollBehavior: () => ({ y: 0 }),
	routes: constantRouterMap
})
vue.config.js
publicPath: '/admin',
部署即可访问

© WangJiaHao 2022