版本

Vue3+Vite+TS

目录

1. script setup中无法使用emit等操作
2. script setup定义变量值
3. script setup定义表单值
4. Vue+Vite+TS打包提醒最大500kb
5. Vite打包js文件无法引入、报错类型错误
6. Vite打包部署Nginx、显示空白页面
7. Vite打包部署Nginx,Nginx配置

解决

1、script setup 中无法使用emit等操作

问题的起因在于无法使用this.$emit，首先需要先通过Vue中引入在进行使用

核心代码就是

1、引入

import {defineEmits} from 'vue';

2、定义要使用的方法

const emit = defineEmits(['change', 'delete','自定义处理方法'])

3、示例如下

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/;} }