版本
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、示例如下
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/;
}
}
本文由mdnice多平台发布