vite的配置和vue项目的nginx部署和项目的静态资源vite没有打包项目静态资源_vite如何配置静态资源不打包

最近写了个vue的项目，还是3的，这里记录一下部署的流程。
其中使用了vite。
这里记录一下vite的一点要点，静态资源路径是import引入才会打包到静态资源文件夹中。
从这里拉的架构，东西比较多，也可以练一下自己的vue3.不过部署还有点小问题，这里记录一下。

git地址：https://github.com/pure-admin/vue-pure-admin
文档地址：https://yiming_chang.gitee.io/pure-admin-doc/pages/config/#package-json

import imgUrl from 'src/img.png'
document.getElementById('hero-img').src = imgUrl
1
2

可以使用别名。如@

/** 设置别名 */
const alias: Record<string, string> = {
  "@": pathResolve("src"),
  "@build": pathResolve("build")
};
1
2
3
4
5

import imgUrl from '@/img.png'
document.getElementById('hero-img').src = imgUrl
1
2

对于json下载的url来说，使用import需要表示为url，用?url加载url后面。这里vite官网有介绍，下面放个例子。

import uibJsonUrl from '@/assets/project.json?url';
1

完整的vite配置：

import dayjs from "dayjs";
import { resolve } from "path";
import pkg from "./package.json";
import { warpperEnv } from "./build";
import { getPluginsList } from "./build/plugins";
import { include, exclude } from "./build/optimize";
import { UserConfigExport, ConfigEnv, loadEnv } from "vite";

/** 当前执行node命令时文件夹的地址（工作目录） */
const root: string = process.cwd();

/** 路径查找 */
const pathResolve = (dir: string): string => {
  return resolve(__dirname, ".", dir);
};

/** 设置别名 */
const alias: Record<string, string> = {
  "@": pathResolve("src"),
  "@build": pathResolve("build")
};

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 ({ command, mode }: ConfigEnv): UserConfigExport => {
  const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } =
    warpperEnv(loadEnv(mode, root));
  return {
    base: VITE_PUBLIC_PATH,
    root,
    resolve: {
      alias
    },
    // 服务端渲染
    server: {
      // 是否开启 https
      https: false,
      // 端口号
      port: VITE_PORT,
      host: "0.0.0.0",
      // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
      proxy: {}
    },
    plugins: getPluginsList(command, VITE_CDN, VITE_COMPRESSION),
    // https://cn.vitejs.dev/config/dep-optimization-options.html#dep-optimization-options
    optimizeDeps: {
      include,
      exclude
    },
    build: {
      sourcemap: false,
      // 消除打包大小超过500kb警告
      chunkSizeWarningLimit: 4000,
      rollupOptions: {
        input: {
          index: pathResolve("index.html")
        },
        // 静态资源分类打包
        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__)
    }
  };
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

简介

vue项目的部署。

开发安装使用

• 获取项目代码

• 安装依赖

pnpm install

1
2

• 运行

pnpm serve
1

• 打包
  执行打包命令后会生成 dist 文件夹。该文件夹用于部署。

pnpm build
1

部署步骤

1.使用项目目录中的 dist 文件夹。 2.将 dist 文件夹复制到 linux 环境中的/root/文件目录中。 3.安装 nginx，配置 nginx

server {
        listen       7070; #端口
        server_name Designer;
        location / {
          root   /root/dist; #项目目录i，静态资源
          index  index.html index.htm; # 首页
          # 用于配合前端路由为h5模式使用，防止刷新404 https://router.vuejs.org/zh/guide/essentials/history-mode.html#nginx
          try_files $uri $uri/ /index.html;  #去除locatin中部分，该例中为去掉了IP和端口，剩余部分路由将作为静态资源的查找路径，根文件夹为root中的文件夹，注意root中结尾不加斜杠。
        }
}

1
2
3
4
5
6
7
8
9
10
11

4.启动 nginx 5.访问http://ip:7070/ 进入登陆页面。（注意：ip 和端口请与环境中配置一致，linux 中防火墙端口需开发。）