打包上传到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: {
      // 是否开启 https
      https: false,
      // 端口号
      port: 5183,
      host: "0.0.0.0",
      // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
      proxy: {
        '/api':"http://localhost:8913"
      },
      //启动完成后打开浏览器
      open: true
    },
   /* plugins: getPluginsList(command, VITE_CDN, VITE_COMPRESSION),
    // https://cn.vitejs.dev/config/dep-optimization-options.html#dep-optimization-options
    optimizeDeps: {
      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-error
  scrollBehavior(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即可