Svelte静态项目部署

Svelte-kit项目部署打包后的静态文件到服务器，使用 adapter-static适配器和nginx代理。

版本

"@sveltejs/adapter-static": "^1.0.0-next.29",
"@sveltejs/kit": "^1.0.0-next.295",
"@vitejs/plugin-legacy": "^1.7.1",

注意

在更新@sveltejs/kit后运行项目会报esbuild的版本错误 更新到提示的版本即可。

项目目录

打包后目录

项目配置 svelte.config.js

import preprocess from "svelte-preprocess"; // 预处理器
import adapter from '@sveltejs/adapter-static'; // 静态适配器
import path from "path";

const subpackage = ['echarts', 'mo.umd']

const config = {
    kit: {
        adapter: adapter({
            pages: 'build', // 将预渲染页面写入的目录。它默认为`build`.
            assets: 'build', // 资源 打包输出目录包括Svelte-kit输出的js和css
            fallback: null // 指定 SPA 模式的后备页面，例如`index.html`或`200.html`或`404.html`。
        }),
        vite: () => ({
            manifest: true,
            sourcemap: true,
            emptyOutDir: true,
            target: "es2018",
            overlay: false,
            resolve: {
                alias: {
                    $utils: path.resolve('./src/utils') // 项目中使用的别名
                }
            },
            server: {
                proxy: {
                    // API代理
                    '/prod-api': {
                        target: 'http://xxx.com',
                        changeOrigin: true,
                        rewrite: path => path.replace(/^/prod-api/, '')
                    }
                }
            },
            build: {
                rollupOptions: {
                    output: {
                        manualChunks(id) {
                            if (id.includes('node_modules')) {
                                const hassSubpackage = subpackage.findIndex(val => id.indexOf(val) !== -1)
                                if (hassSubpackage !== -1) {
                                    return id.toString().split('node_modules/')[1].split('/')[0].toString()
                                }
                                return 'vendor'
                            }
                        }
                    }
                }
            }
        })
    },

    preprocess: [
        preprocess({
            postcss: true,
        }),
    ]
};

export default config;

Nginx 配置

注意：try_files $uri $uri /index.html;

一般来说nginx的配置是try_files $uri $uri/ /index.html; 从上面的打包后目录结构就会发现 adapter-static文件夹中的index.svelte会生成到上级目录中。所以不需要到文件夹下找。

server {
    listen 80;
    server_name  xxx.com;

    location / {
        proxy_pass https://xxx.com;
    }
}
server {
    listen 443 ssl;
    server_name  xxx.com;

    access_log /var/log/nginx/xxx_access.log;
    error_log /var/log/nginx/xxx_error.log;

    ssl_certificate conf.d/ssl/4678010__xxx.com.pem;
    ssl_certificate_key conf.d/ssl/4678010__xx.com.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE:!MD5;
    ssl_prefer_server_ciphers on;

    location / {
        root /data/html;
        try_files $uri $uri /index.html;
    }

    location /prod-api/ {
        proxy_pass http://zsdn/;
    }

}

技术支持 Svelte Ui 框架

有无兴趣靓仔？了解一下：BeerUi