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

默认的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;
     }
1
2
3
4
5
6
7
8
9
10

意思是，访问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/" : "/",
1

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

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

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

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

需要改写为：

handleLoginStyle() {
      let url = getBaseUrl() + 'images/background.5825f033.svg'
      return {
        backgroundColor: '#f0f2f5',
        backgroundImage: `url(${url})`,
        backgroundRepeart: 'no-repeat',
        backgroundPosition: '50%',
      }
    },
1
2
3
4
5
6
7
8
9

这里，我们封装了方法：

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

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

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

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

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