After vue3+vite is packaged, the page is placed in the server (level 1, level 2) directory, the page is blank, nuxt uses pm2 to publish the server

How to deal with blank pages after packaging:

First-level directory:

base: process.env.NODE_ENV === 'production' ? './' : '/', 

Secondary project: 

base: process.env.NODE_ENV === 'production' ? '/prod/secondary directory file name/' : '/', // put the server secondary directory

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')

// https://vitejs.dev/config/
export default  ({ command, mode }) =>{
  return defineConfig({
     base: process.env.NODE_ENV === 'production' ? '/prod/二级目录文件名/' : '/',//放服务器二级目录
    // base: process.env.NODE_ENV === 'production' ? './' : '/',//服务器一级目录

    plugins: [
      vue(),
    ],
    define: {
      'process.env': {}
    },
    resolve: {
      alias: {
        '@': resolve('./src'),
        // 'assets': resolve('./src/assets'),
        // 'style': resolve('./src/style')
      }
    },
    server: {
      // host: process.env.VITE_HOST,
			// port: process.env.VITE_PORT,
			// 是否自动在浏览器打开
			open: false,
			// 是否开启 https
			https: false,
			// 服务端渲染
			ssr: false,
			// base: process.env.VITE_API_URL,
			// outDir: process.env.VITE_OUTPUT_DIR,
      proxy: {
        '/api': {
          target: 'http://xx.xxx.xxx:30000',
          // target:import.meta.env.VITE_API_URL,
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
    },
  })

}

router.js

const router = createRouter({
  history: createWebHashHistory(),
})

The nuxt project publishes the configuration pm2 on the server

1. Install pm2 on the server ( reference address )

2. After the project is packaged, put the 3 files separately in a new folder for compression

3. Upload the compressed package to the server to decompress the project, and enter the project to run the command

Decompression command: unzip compressed package name.zip 

npm install

npm run start 

Tip: If the URL cannot be accessed after closing the server, run the command npm run start & 

& allow to run in background

4. PM2 startup project

pm2 start project name

 pm2 list view all items

pm2 restart project name restart project

Guess you like

Origin blog.csdn.net/qq_36821274/article/details/126886717