vue打包之部署在非根路径下的三两事

首先，感叹一下，2019年已经过去一半，想想自己做了些什么，好像也没做什么。

今天试着配一个nginx，以前的nginx都是指向的/根路径，今天的nginx指向的非/根路径，遇到许多问题的，总结总结。

老规矩，先来点示例代码：

nginx：

server {
        listen       ;
        server_name domain.com;
        location /path {
            alias "/your-project-file";
            index index.html;
            try_files $uri $uri/ /path/index.html;
        }
}

location /path ：表示项目访问地址为http://domain.com/path
alias /your-project-file ：指向你的项目打包后放在服务器的位置

try_files /path/index.html ：这里为router官方文档推荐的写法，需要把/path加上

然后就是vue代码，这里用到的是vue-cli3x的代码，上关键的：

首先是vue.config.js下的publicPath: process.env.NODE_ENV === 'production' ? '/path': '/'，为什么需要这样配？具体参见cli文档

然后是路由需要配置base: process.env.NODE_ENV === 'production' ? '/path': '/'，这个也需要看router文档

通过这两个地方的配置，访问http://domain.com/path就可以访问到你打包后的项目了，但是！！！！

项目中的图片我是放在public文件夹下的，打包后没有正确的将public文件夹给加上/path，导致所有图片都404，很烦

这时网上出现了两个声音，第一，将图片放到src文件夹里面的assets。我试过，没搞出来，放弃了。第二，在图片前加上publicPath，参见文档。

是的，包括所有以静态资源方式引入到项目的框架/插件，都需要拼上<%= BASE_URL %>，处理完之后，再次打包，解决了。

啊，时间好快，文章好水...