vue部署到二级目录

3,286 阅读1分钟

说明

将用@vue/cli编写的vue文件放到,某域名二级目录下,此vue中设置了多个路由页面。需要配置以下几点:

文件路径

在vue.config.js中配置,publicPath

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vue-test/': '/'
}

路由

1、使用hash方法
2、使用history,并配置base路径

//hash
new VueRouter({
  mode: 'hash',
  scrollBehavior: () => ({
    y: 0
  }), //滚动到顶部
  routes: RouterMap
})

// history
new VueRouter({
  mode: 'history',
  base: "/vue-test/", //必须配置
  scrollBehavior: () => ({
    y: 0
  }), //滚动到顶部
  routes: RouterMap
})

nginx

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /var/www/mallPC/;
        try_files $uri $uri/ /index.html; //配置
        index  index.html index.htm;
    }
}