VUE3项目启动过程中遇到的问题记录

版本

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、示例如下

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

    } 
 
}

本文由 mdnice 多平台发布