企业网站优化暴肃湖南岚鸿很好,湖北随州住房和城乡建设部网站,建筑工地老板直招工人,自己怎么学电商运营我们开发中会遇到这样的需求#xff0c;让我们用服务器nginx部署一个用域名的二级目录来访问项目 https#xff1a;xxx/二级目录/来放访问项目 目录 思路
1、nginx配置#xff08;vue2 和 vue3配置的nginx相同#xff09;
2、vue2webpack的配置
#xff08;1#xff0… 我们开发中会遇到这样的需求让我们用服务器nginx部署一个用域名的二级目录来访问项目 httpsxxx/二级目录/来放访问项目 目录 思路
1、nginx配置vue2 和 vue3配置的nginx相同
2、vue2webpack的配置
1vue.config.js配置
2router配置
3、vue3vite的配置
1vite.config.js配置
2router配置
4、发布
5.扩展 思路 将项目中的访问路由和静态资源文件都加上要配置的二级目录然后配置nginx的二级目录就ok了 首先我们要配置一个106.13.0.11:8083/qfqzApp的二级路由针对于vue2项目我们需要进行一下操作。
1、nginx配置vue2 和 vue3配置的nginx相同
server {listen 8083; #1.监听访问端口server_name 106.13.0.11; #2.当前服务器ip或者域名或者localhost# 这里要写成末尾不带/的形式如果写成/qfqzApp/单单访问106.13.0.11:8083/qfqzApp会404location /qfqzApp { alias /usr/web/qfqz/dist/; # 这里配置alias配置root的话必须了解访问规则index index.html index.htm;try_files $uri $uri/ /qfqzApp/index.html; # 这里在/index.html的基础上前面需要加上/qfqzAppgzip_static on;}}2、vue2webpack的配置
1vue.config.js配置
配置
module.exports {publicPath: /qfqzApp/
}2router配置
const router new VueRouter({mode: history,base: process.env.BASE_URL, // 这个就是上面的publicPathroutes,
});3、vue3vite的配置
1vite.config.js配置
配置
export default defineConfig({base: /qfqzApp/
})2router配置
const router createRouter({// 指定路由的模式,此处使用的是history模式history: createWebHistory(/qfqzApp/),// 路由地址routes
});4、发布
配置完以上三步后 vue项目进行打包发布复制到服务器对应目录下 nginx配置改完记得进行重启。 然后就能够正常访问二级路由了。
5.扩展
Nginx 配置中root和alias的区别分析__揽的博客-CSDN博客
