打包上传到Linux部署并启动
Linux nginx下载安装教程：记录一下centos8安装nginx并部署使用_centos8.0 安装nginx-CSDN博客
vite.config.ts 配置
import dayjs from "dayjs";
import { resolve } from 'path';
import { fileURLToPath } from 'url';
import { dirname } from 'path';import pkg from "./package.json";
import vue from '@vitejs/plugin-vue'; // 导入 Vue 插件/** 当前执行node命令时文件夹的地址（工作目录） */
const root: string = process.cwd();const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);/** 路径查找 */
const pathResolve = (dir: string): string => {return resolve(__dirname, ".", dir);
};/** 设置别名 */
const alias: Record<string, string> = {"@": pathResolve("src"),"@build": pathResolve("build")
};
console.log('Resolved src path:', __dirname);
const { dependencies, devDependencies, name, version } = pkg;
const __APP_INFO__ = {pkg: { dependencies, devDependencies, name, version },lastBuildTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
};export default{base: "/",root,resolve: {alias},// 服务端渲染server: {// 是否开启 httpshttps: false,// 端口号port: 5183,host: "0.0.0.0",// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxyproxy: {'/api':"http://localhost:8913"},//启动完成后打开浏览器open: true},/* plugins: getPluginsList(command, VITE_CDN, VITE_COMPRESSION),// https://cn.vitejs.dev/config/dep-optimization-options.html#dep-optimization-optionsoptimizeDeps: {include,exclude}, */plugins: [vue()],// 分析打包结果build: {sourcemap: false,// 消除打包大小超过500kb警告chunkSizeWarningLimit: 4000,rollupOptions: {input: {index: pathResolve("index.html")},treeshake: {moduleSideEffects: false, // 假设模块无副作用},// 静态资源分类打包output: {chunkFileNames: "static/js/[name]-[hash].js",entryFileNames: "static/js/[name]-[hash].js",assetFileNames: "static/[ext]/[name]-[hash].[ext]"}}},define: {__INTLIFY_PROD_DEVTOOLS__: false,__APP_INFO__: JSON.stringify(__APP_INFO__)}
};
tsconfig.json 配置 添加baseUrl和paths
{"compilerOptions": {"baseUrl": ".", // 确保这是一个字符串"paths": {"@/*": ["src/*"] // 确保路径是一个字符串数组}}
}开始打包
npm run build如果报错：
错误一
vite.config.ts:33:17 - error TS6198: All destructured elements are unused.33 export default ({ command, mode }: ConfigEnv): UserConfigExport => {去掉command，mode，这是报引用了却没使用的错误
错误二
vite.config.ts:10:22 - error TS2580: Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.10 const root: string = process.cwd();错误原因
process是 Node.js 的全局变量，用于访问当前 Node.js 进程的信息（如process.cwd()获取当前工作目录）。- TypeScript 默认不包含 Node.js 的类型定义，所以会报错
Cannot find name 'process'。 - 你需要安装
@types/node来提供 Node.js 的类型定义。
运行命令
npm install --save-dev @types/node为什么需要 @types/node？
@types/node是 TypeScript 的类型定义包，提供了 Node.js 的全局变量（如process、__dirname、__filename）和模块的类型信息。- 安装后，TypeScript 就能识别
process变量，不会再报错。
配置
tsconfig.json
{"compilerOptions": {"types": ["node"] // 确保包含 "node"}
}添加这个配置
错误三
src/stores/auth.ts:3:76 - error TS2307: Cannot find module '/src/api/auth' or its corresponding type declarations.3 import { login as apiLogin, register as apiRegister, getCurrentUser } from '/src/api/auth'这是报引用了未定义的文件和变量，vite会把你加载了没加载的通通打包，所以就报这个错，解决办法要不就找插件忽略他，要不就删了或注释掉，我这里选择的是注释掉它
错误四
src/router/index.ts:97:22 - error TS6133: 'from' is declared but its value is never read.97 scrollBehavior(to, from, savedPosition) {这是使用这个函数时，函数里面有两个参数to,from没有使用，vite也会报错
解决办法：
在函数头上加注解 // @ts-expect-error 切记 // 这个要加上
// @ts-expect-errorscrollBehavior(to, from, savedPosition) {// 如果存在保存的滚动位置（比如后退/前进导航），则恢复该位置if (savedPosition) {return savedPosition;} else {// 否则滚动到页面顶部return { top: 0 };}}错误五
src/router/index.ts:43:29 - error TS2307: Cannot find module '@/views/message/message.vue' or its corresponding type declarations.43 component: () => import('@/views/message/message.vue'),这个是打包的时候识别不了vue文件，需要安装 @types/vue 插件
npm install -D @types/vue（2）创建 shims-vue.d.ts 文件（如果尚未存在）
在 src 目录下创建 shims-vue.d.ts 文件，并添加以下内容：
declare module '*.vue' {import { DefineComponent } from 'vue';const component: DefineComponent<{}, {}, any>;export default component;
}这样 TypeScript 就能识别 .vue 文件。
到这里我是基本上运行成功了
http://123.249.76.105/
效果图
打包好后项目在dist下，把它上传到服务器的nginx/html 目录，然后启动nginx即可