Vue项目打包部署全过程(history模式)

module.exports = {
    // /vue/这个名字你自己起，也可以用我这个
    publicPath: process.env.node_ENV === "production" ? "/vue/" : "./",
    outputDir:'dist',
}

export default new Router({
    // history模式，需要和服务端配合才能在生产环境下正常使用
    mode: 'history',
    // 基本路由，这个名字可以自己起，但是要注意和vue.config.js里面publicPath所起的名字一致
    base:'/vue/',
    routes:[]
})

location /api/{
    proxy_pass  Http://121.36.94.221:6600/;
    index  index.html index.htm;
}
location /info/{
    proxy_pass  http://ckk.xiaoandcai.cn/;
    index  index.html index.htm;
}

//不会这样做，因为部署服务器后地址要换成ip，不然会404
axios.get("localhost:8080/api")
//你可以选择这样做，但是我们不推荐
axios.get("ip:8080/api")
//我们推荐这样做，让axios根据相对路径补全ip+端口，这样比较省心【但是要注意你的项目要部署在nginx代理服务器下。如果你不部署的话相对路径也是不行的，毕竟你都没部署人家nginx服务器上，自然你的项目就不是nginx家的孩子，所以相对路径的小名，nginx怎么能认识呢？】
axios.get("/api")

location / {
    root   html;
    index  index.html index.htm;
    autoindex on;       #开启nginx目录浏览功能
    autoindex_exact_size off;   #文件大小从KB开始显示
    charset utf-8;          #显示中文
}
# 写我们的路由暗号/vue
location /vue{
    # alias后面写项目所在目录 xxxxxxx一定要注意，不能写成D:\nginx\nginx-1.20.0\html\dist，要写成斜杠/形式，否则会404
    alias D:/nginx/nginx-1.20.0/html/dist;
    charset utf-8;          #显示中文
}