公司常用服务器为apache,最近一个项目需部署到nginx目录,且是在子目录下,即访问链接:http://www.xxx.com/rector/bnu/
apache服务器配置很简单,只需要在index.html同级目录下添加.htaccess文件即可,代码如下:
RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /rector/bnu/index.html [L]
RewriteRule 路径需包含子目录路径
nginx服务器需要修改nginx的配置文件,如果是域名单配置文件则在nginx安装目录nginx/conf/vhost目录下的域名配置文件,一般文件名为 域名.config,如果不是域名单配置文件咋是修改 nginx.conf 文件,配置代码如下:
/rector/bnu 为需要配置的子目录,以实际为准
location /rector/bnu { try_files $uri $uri/ /rector/bnu/index.html; }
vue代码修改:
首先是router/index.js文件,base需改为子目录路径:
const router = new VueRouter({ mode: 'history', // base: process.env.BASE_URL, base: "/rector/bnu/", routes })
vue.config.js文件中定义publicPath(打包后公共资源文件访问路径):
module.exports = { lintOnSave: false, devServer: { proxy: { '/web': { target: 'http://yzconsole.360eol.com', changeOrigin: true, } } }, chainWebpack: config => { config .plugin('html') .tap(args => { args[0].title = "北京师范大学2022年研究生招生宣传" return args }) }, publicPath:"/rector/bnu", }
嗯,就是这么简单了