版本
Vue3+Vite+TS
目录
- script setup中无法使用emit等操作
- script setup定义变量值
- script setup定义表单值
- Vue+Vite+TS打包提醒最大500kb
- Vite打包js文件无法引入、报错类型错误
- Vite打包部署Nginx、显示空白页面
- Vite打包部署Nginx,Nginx配置
解决
1、script setup 中无法使用emit等操作
问题的起因在于无法使用this.$emit，首先需要先通过Vue中引入在进行使用
核心代码就是
1、引入
import {defineEmits} from 'vue';
2、定义要使用的方法
const emit = defineEmits(['change', 'delete','自定义处理方法'])
3、示例如下
<script setup> import {defineProps, defineEmits} from 'vue'; import {toRefs} from 'vue'; const props = defineProps({ item: { type: Object, default() { return { title: '', items: [], }; }, }, }); const {item} = toRefs(props); const emit = defineEmits(['change', 'delete','自定义处理方法']) // setup code </script>
2、VUE3定义变量值
```text import { ref } from 'vue' const input = ref('') ```
3、VUE3定义表单值
```text import { reactive } from 'vue' const pageData = reactive({ title:'xxxxx' }) ```
4、VUE3打包提醒最大500kb的问题
build: { chunkSizeWarningLimit:1500, rollupOptions: { output:{ manualChunks(id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString(); } } } } }
5、VUE3解决打包js文件无法引入、报错类型错误
error TS7006: Parameter 'v' implicitly has an 'any' type.
主要是需要增加如下配置
"noImplicitAny": false, "allowJs": true
完整配置如下(tsconfig.json)
{ "extends": "@vue/tsconfig/tsconfig.web.json", "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "noImplicitAny": false, "allowJs": true }, "references": [ { "path": "./tsconfig.config.json" } ] }
6、vite 解决打包之后，部署Nginx，访问显示空白页面
修改router中createWebHistory为createWebHashHistory
修改路由配置文件src/router/index.ts
import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const router = createRouter({ history: createWebHashHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'index', component: () => import('../views/Index.vue') } ] }) export default router
7、vite 部署nginx的配置
项目位置、代理路径根据自己项目实际路径添加
user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { add_header Access-Control-Allow-Methods *; add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Headers *; add_header testname zuiyu; include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; #gzip on; include /etc/nginx/conf.d/*.conf; proxy_buffer_size 16k; proxy_buffers 4 32k; proxy_busy_buffers_size 96k; proxy_cache_path /tmp/cache levels=1:2 keys_zone=cache_one:100m inactive=1d max_size=10g; proxy_connect_timeout 10; proxy_read_timeout 180; proxy_send_timeout 5; proxy_temp_file_write_size 96k; proxy_temp_path /tmp/temp_dir; server { listen 9002; server_name 127.0.0.1; location /zfc { add_header zuiyu_args1 "test hello"; add_header zuiyu_args $args; add_header Nginx-Cache "$upstream_cache_status"; try_files $uri $uri/ /index.html; alias /usr/share/nginx/html/zfc; index index.html; } location /assets { add_header zuiyu_args1 "test hello"; add_header zuiyu_args $args; add_header Nginx-Cache "$upstream_cache_status"; alias /usr/share/nginx/html/zfc/assets; index index.html; } location ^~/prod { proxy_pass http://host:port/; } }
