网站和网络建设自查报告,网站建设岗位有哪些,昆明网站建设-中国互联,傻瓜式做网站哪个软件好Vue项目构建时遇到的问题与上线相关问题 项目构建遇到的问题构建指令关于JavaScript文件无法识别的问题关于element-plus组件库中的模块显示找不到的问题关于路由懒加载时组件路径报错问题关于项目静态资源基准路径的设置关于路由模式的问题 关于nginx服务器的使用 项目构建遇到… Vue项目构建时遇到的问题与上线相关问题 项目构建遇到的问题构建指令关于JavaScript文件无法识别的问题关于element-plus组件库中的模块显示找不到的问题关于路由懒加载时组件路径报错问题关于项目静态资源基准路径的设置关于路由模式的问题 关于nginx服务器的使用 项目构建遇到的问题
构建指令 npm run build构建成功会生成一个dist文件夹 ps每次改动项目内的代码都必须重新打包关于JavaScript文件无法识别的问题 原因在 Vue项目中添加 TypeScript 支持后可能会出现无法识别 JavaScript 文件的问题导致项目构建失败解决解决这个问题的方法是在 TypeScript 的配置文件 tsconfig.json 中添加 allowJs: true 选项以允许 TypeScript编译器编译 JavaScript文件。文档 TypeScript的配置文件 tsconfig.json找到compilerOptions选项或者对象加上新的选项语句allowJs: true;关于element-plus组件库中的模块显示找不到的问题 原因ts(TypeScript)不识别组件库中提供的模块解决添加整体声明文档env.d.ts语句declare module element-plus;关于路由懒加载时组件路径报错问题 原因ts(TypeScript)不识别.vue为后缀的文件是一个vue组件解决为此类文件添加整体声明文档env.d.ts语句declare module *.vue {import { DefineComponent } from vue;const component: DefineComponent{}, {}, any;export default component;}原理这段代码是一个 TypeScript 的声明文件用于告诉编译器如何处理以 .vue 扩展名结尾的文件。它的作用是声明一个模块该模块导出一个默认的组件对象这个组件对象是一个 Vue 组件具有空的 props、data 和 methods 选项。同时这个组件对象没有 template 选项因为 Vue 3 已经将 template 选项废弃而是使用了 render 函数。另外这个组件对象的类型是 DefineComponent{}, {}, any其中 DefineComponent 是 Vue 3 内置的一个类型用于定义组件的类型第一个泛型参数是 props 的类型第二个泛型参数是 data 和 computed 的类型第三个泛型参数是 methods 的类型。{} 表示这些选项为空对象any 表示 methods 的类型是任意类型。这样在其他的 TypeScript 文件中引入这个模块时就可以获得正确的类型推断和自动补全。关于项目静态资源基准路径的设置 原因dist文档中的index.html文件引入文件时出现/开头的格式代表文件路径是绝对路径这种路径会导致项目上显示报错404情况解决为打包的静态资源配置基准路径将/改成./文档vite.config.ts在该文档导出的defineConfig配置对象中与pluginsresolveserver等对象同级语句base:./;关于路由模式的问题 原因history模式下发布的项目页面一刷新就404解决将路由模式改成hash模式文档router文件夹中的index.ts文档也就是路由管理对象实例化和配置的文档语句引入createWebHashHistory方法并将实例化配置对象中的createWebHistory方法改成createWebHashHistory即可import { createRouter, createWebHashHistory} from vue-router;import routes from /router/routeConfig;const router createRouter({history: createWebHashHistory(import.meta.env.BASE_URL),routes,})关于nginx服务器的使用 步骤一下载nginx安装包将相应的文件夹放在从磁盘开始路径中没有中文的目录下↓↓↓↓↓↓↓↓↓↓步骤二将项目构建生成的dist文件夹放在nginx文件夹中与nginx.exe同级别即可↓↓↓↓↓↓↓↓↓↓步骤三配置nginx项目目录更改配置文档需要将任务管理器中所有的nginx.exe进程全部关闭再重启在conf文件夹中找到nginx.conf文件在该文件中找到server对象→location / 对象将该对象中的 root后面的文件夹名改成distroot dist↓↓↓↓↓↓↓↓↓↓步骤四配置反向代理更改配置文档需要将任务管理器中所有的nginx.exe进程全部关闭再重启原因在vite.config.ts中配置的服务器请求代理只在开发模式下有用生产模式下这些代码不生效所以需要重新配置请求代理让nginx来转发文档nginx.conf配置文件在配置文件中添加如下语句语句location ~ /公共前缀 {proxy_pass http://ip端口}注意配置文件中语句前面加上#代表该条语句被注释不生效添加语句中的~两边都有空格proxy_pass后面加上接口服务器的ip端口配置文件中的更改只有这两处其他不要动
