[记录]Nginx部署打包的vue项目出现的问题

vue3 + vite

部署访问url 为：localhost:7080/spc/login，spc为项目名

出现404

开发环境运行没有问题，nginx部署出现问题

router 用的history（history: createWebHistory()）模式

vite.config.js

build:{
//...
 outDir:spc,//打包文件名
}

nginx 

打包的spc文件夹放在根目录下，与html文件夹同级

server {
        listen       7080;
        server_name  localhost;
        location / {
            root   spc;
            try_files $uri $uri/ /index.html;#解决刷新问题，重要
            index  index.html index.html;
        }
}

出新白屏，Uncaught SyntaxError: Unexpected token '<' 报错

报错在index.html,原因是文件的引用路径问题，我这边在index.html中引用的一个额外的config.js，在public文件夹下的，直接写的 <script src="/config.js"></script>

解决，可以在vite.config.js中配置的base:'/'，当然也可以用<%=BASE_URL%>

return {
    base: '/',
    plugins: []
}