vue-cli3的二级域名使用history模式的各种问题学习

最近遇到需要配置二级域名的情况，使用vue-cli3、router与nginx配置的时候，遇到了各种各样的问题。在这里记录一下成功方法。

1、使用vue-cli创建一个新手项目。加上环境配置，补上vue.config.js配置

vue.config.js配置如下

module.exports = {
    publicPath: process.env.VUE_APP_BASE_URL,
    outputDir: process.env.NODE_ENV === "production" ? "dist" : "dist-test",
}

package.json文件的scripts修改为如下，添加测试环境

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "testing": "vue-cli-service build --mode testing",
    "lint": "vue-cli-service lint"
  },

其中publicPath正式包是 '/' 而 测试包是 '/dist-test/'

2、打开router文件，修改mode与base，base与publicPath一样

const router = new VueRouter({
  mode: "history",
  base: process.env.VUE_APP_BASE_URL,
  routes,
})

3、启动webpack打包，运行npm run testing与npm run build。项目根目录生产dist与dist-test文件夹

4、配置nginx

server {
        listen       80;
        server_name  jun.wowqu.cn;

        location / {
            root   D:/learn/test-cli3/dist;
            try_files $uri $uri/ /index.html;
        }

        location /dist-test {
            root   D:/learn/test-cli3;
            try_files $uri $uri/ /index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

5、运行nginx，访问地址

6、结果不错，主域名与子域名都没问题。

7、总结

这里的配置实际不难，最困难的是nginx的配置。官网给的例子实际非常模糊，根本没有能让人很好的处理二级域名部署。说明下最重要的nginx配置

location /dist-test {
    #test-cli3是项目的根目录，这里的root不能是D:/learn/test-cli3/dist-test，假如带上/dist-test会直接404。
    root   D:/learn/test-cli3;
    try_files $uri $uri/ /index.html;
}

8、补充

hosts添加了

127.0.0.1 jun.cn

9、参考的大佬文章

vue-cli3 history模式下部署的各种坑

10、留下的疑问

怎么才能使用在上面的publicPath与base使用'./'相对路由呢？不可能每次都写死一个目录吧？
毕竟在我的想法里面，假如使用了'./'相对路由，那不管配置在哪个项目域名下面，都不需要修改配置文件了。很方便。我看官网也有说这种方法的使用，可惜我试了不可以。