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

简介: 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/;
    } 
 
}


目录
相关文章
|
4天前
|
JavaScript 前端开发 索引
「Vue3系列」Vue3 条件语句/循环语句
在 Vue 3 中,你可以使用条件语句来动态地控制模板中的渲染内容。Vue 提供了多种方式来实现条件渲染,包括 `v-if`、`v-else-if`、`v-else` 和 `v-show` 指令。
27 0
|
5天前
Vue3框架中让table合计居中对齐
Vue3框架中让table合计居中对齐
|
5天前
|
JavaScript 应用服务中间件 nginx
vue项目中页面遇到404报错
vue项目中页面遇到404报错
|
5天前
Vue3 子/父组件相互调用
Vue3 子/父组件相互调用
27 0
|
5天前
|
JavaScript
vue3 使用element plus 打包时 报错
vue3 使用element plus 打包时 报错
13 0
|
5天前
|
JavaScript
Vue项目中强制刷新页面的方法
Vue项目中强制刷新页面的方法
11 0
|
5天前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue3——如何实现页面访问拦截
Vue3——如何实现页面访问拦截
|
1天前
|
JavaScript 前端开发 开发者
浅谈Vue 3的响应式对象: ref和reactive
浅谈Vue 3的响应式对象: ref和reactive