vant3和Vue3做的项目部分用npm run dev 手机扫二维码，显示白屏 。 可能是ES6一些语法问题，解决思路：1. 语法降级 npm install @vitejs/plugin-legacy@1.8.2 -D 2. 使用npm run build 发布到dist , 3. 改写 vite.config.js
import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
import legacy from '@vitejs/plugin-legacy'
const { resolve } = require("path");
const NODE_ENV = process.env.NODE_ENV;
export default defineConfig({
base: './',
plugins: [
vue(),
legacy({
// legacy这里是browserslist语法，可以写 >=
targets: ['ios >= 10', 'chrome >= 49'],
polyfills: ['regenerator-runtime/runtime']
})
],
resolve: {
alias: [{ find: "@", replacement: resolve(__dirname, "src") }]
},
build: {
target: 'es2015',
// 删掉之前错误的 cssTarget，或者改成esbuild支持的简写 ios10
// cssTarget: 'ios10',
assetsDir: "./static",
rollupOptions: {
input: {
main: resolve(__dirname, "index.html")
},
},
},
css: {
postcss: {
plugins: [
// require('postcss-pxtorem')({
// rootValue: 37.5,
// propList: ['*']
// })
]
}
},
server: {
proxy: {
"/api": {
target: "http://127.0.0.1:8081",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, "/"),
},
},
host: '0.0.0.0',
port: 3000
}
});
4. 用nginx做代理 nginx.conf 配置如下：
server {
listen 3000;
server_name 我的IP;
root dist的发布地址；
index index.html;
# 入口HTML禁止缓存，保证手机每次都能拿到最新构建的hash文件引用
location = /index.html {
add_header Cache-Control "no-cache, no-store, must-revalidate";
}
# 带hash的静态资源：长缓存；文件不存在直接404，绝不回落到index.html
location ~* \.(js|css|png|jpe?g|gif|svg|ico|woff2?|ttf|eot|map)$ {
try_files $uri =404;
expires 30d;
add_header Cache-Control "public, max-age=2592000, immutable";
}
location / {
try_files $uri $uri/ /index.html;
}
# api代理，等价vite代理逻辑：/api/xxx → http://127.0.0.1:8081/xxx
location /api/ {
proxy_pass http://127.0.0.1:8081/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
5. nginx -t 测试一下nginx.conf 文件是否有效
6.nginx -g "daemon off;"
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/weixin_41415820/article/details/169345306
