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

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

一、使用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/'

二、打开router文件，修改mode与base，base与publicPath同样

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

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

四、配置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;
        }
    }

五、运行nginx，访问地址

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

七、总结

这里的配置实际不难，最困难的是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;
}

八、补充

hosts添加了

127.0.0.1 jun.cn

九、参考的大佬文章

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

十、留下的疑问

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