vue项目配合nginx部署到子目录、二级域名的解决办法

您所在的位置：网站首页 › 潮汕火锅丸子门头图片大全 › vue项目配合nginx部署到子目录、二级域名的解决办法

vue项目配合nginx部署到子目录、二级域名的解决办法

2024-02-04 16:07| 来源: 网络整理| 查看: 265

默认的vue项目是部署到网站根目录的。

但是，有些情况下，一个域名内需要放置多个内容。所以，只能分子域名或是子目录来部署。

譬如，当前网站的域名是：www.abc.com

使用nginx做代理的时候，分配给我们的部署vue项目的域名地址是：www.abc.com/vuedemo

先看nginx的配置：

location / { root html; index index.html index.htm; gzip_static on; } location /vuedemo/ { alias /usr/local/nginx/html/vuedemo/; try_files $uri $uri/ /vuedemo/index.html; index index.html index.htm; }

意思是，访问www.abc.com就指向根目录的index.html 访问www.abc.com/vuedemo就指向根目录下面的vuedemo这个文件夹内的index.html

这里，咱们前端不需要管到底放置到哪里。只需要知道，最后是通过哪个域名访问到我们的vue项目的index.html文件的。这里就是vuedemo

一般来说，我们在本地开发的时候，肯定是是/，部署的时候，才换成vuedemo

所有解决办法是（针对vue路由的#哈希模式,history模式大体一致）：

1、vue.config.js中的配置添加publicPath

publicPath: process.env.NODE_ENV === "production" ? "/vuedemo/" : "/",

2、因为我们是vue路由是哈希模式，所有关于改路由的base，不用改，哈希模式不生效.

new VueRouter({ // mode: 'history', // require service support // base:'vuedemo', 不用改，哈希不生效 routes: constantRoutes });

3、以上解决了打包后的css、js文件引入问题。但是，还是没有解决我们vue目录下的public目录。这里面的文件，打包后是访问不到的。譬如背景图，我们就不能写在css里，需要改写为style绑定模式

// background: #f0f2f5 url('/images/background.5825f033.svg') no-repeat 50%;

需要改写为：

handleLoginStyle() { let url = getBaseUrl() + 'images/background.5825f033.svg' return { backgroundColor: '#f0f2f5', backgroundImage: `url(${url})`, backgroundRepeart: 'no-repeat', backgroundPosition: '50%', } },

这里，我们封装了方法：

// 设置静态资源根路径(用于访问public内的图片等) export function getBaseUrl() { let baseUrl = '' if (process.env.NODE_ENV === 'development') { // 开发模式 baseUrl = '/' } else { // 生产环境 baseUrl = '/vuedemo/' } return baseUrl }

当然，也可以直接使用vue-cli中webpack提供的环境变量。总之，就是根据开发环境和生产环境来动态确定前缀了，不能直接一味使用/

类似，其他的代码内，引入public目录的，因为不参与打包，而是直接拷贝的，这里的文件路径，都需要做类似处理。

譬如如下写法生产环境下改为相对路径也是可以的：

language_url:process.env.NODE_ENV === 'development'? '/tinymce/langs/zh_CN.js': '../tinymce/langs/zh_CN.js',

【本文地址】

vue项目配合nginx部署到子目录、二级域名的解决办法

vue项目配合nginx部署到子目录、二级域名的解决办法

今日新闻

推荐新闻