背景最近使用Nginx部署Vue项目时，发现页面不是根路由(/)的情况下会出现404的情况，网上搜寻了一下解决方法，原来是由于Vue单页面开发特性导致的，这里记录一下解决方法。方案只需要在Nginx配置中添加以下内容即可：location / { try_files $uri $uri/ @router; index index.html index.htm; } location @router { rewrite ^.*$ /index.html last; }在1panel的配置server { listen 80 ; listen 443 ssl http2 ; server_name ***; index index.php index.html index.htm default.php default.htm default.html; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_for

业务上碰到一个需求，用户在已经发布的web中自制vue3组件，还需要接收web在运行时产生的数据并渲染定制的页面。在最初学习vue的时候学的是vue2，当时直接在script中new Vue()以达到使用vue的功能，后来逐渐接触项目工程化，借助npm、yarn、vite直接来创建项目，渐渐忘记了vue最初的模样。经过一段时间摸索，vue3也能够实现此方法。项目背景给用户一个代码编辑页面，分别可以编辑template、js和css，然后在需要展示的地方再对用户编写的组件进行渲染。实现思路正常开发一个vue网页的流程为，使用cli创建项目、编写代码、编译最后发布，而编译这一步就会将代码编译为不需要vue也能够运行的普通代码，而用户编写的肯定不能使用这个流程，不然每次用户写完就要重新编译发布，并且用户所编写的代码文件也是存储在数据库中的，这显然不适合。前端从数据库拿到用户所写的js文件，肯定是不能直接运行的，第一步就是将字符串格式的js代码转为js对象，然后再运行。当然，转为js对象后也不能直接运行，因为本地编写的代码在编译后就没有Vue这个环境了，直接调用new Vue()方法是行不通的

vite+ts+vue3项目依赖"dependencies": { "@element-plus/icons-vue": "^2.1.0", "axios": "^1.3.4", "element-plus": "^2.2.32", "pinia": "^2.0.32", "pinia-plugin-persistedstate": "^3.1.0", "vue": "^3.2.45", "vue-router": "^4.1.6" }main.tsimport { createApp } from 'vue' import './style.css' import App from