vue3 프로젝트가 패키징되어 서버에 게시된 후 액세스 페이지가 공백으로 표시되는 문제를 해결하는 방법

vue3 프로젝트가 패키징되어 서버에 게시된 후 액세스 페이지에 공백이 표시됩니다

1. vue.config.js 파일

에서 publicPath를 다음과 같이 처리합니다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    outputDir: 'dist',
    indexPath: 'index.html',
    lintOnSave: false,
    transpileDependencies: true,
})

2. 라우터 폴더의 .js 파일

처리 방법은 다음과 같습니다. 수정된 부분

import { createRouter, createWebHistory, createWebHashHistory  } from 'vue-router';
import routes from "./routes";

const router = createRouter({
    //history: createWebHistory(process.env.BASE_URL),//默认时
    history: createWebHashHistory(process.env.BASE_URL),//修改后
    routes
})
export default router;

을 사용하여 위의 두 단계를 해결하고, vue3 프로젝트를 패키징하여 게시한 후 vue3 프로젝트에 액세스할 때 빈 페이지가 표시되는 문제를 해결합니다. server

프로젝트 패키징 시 빈 페이지가 표시되는 문제와 해결방안

에 프로젝트 개발이 완료된 후 패키징하겠습니다

npm run build

패키징으로 생성된 파일이 dist 폴더에 들어가게 됩니다

그런데 가끔 index.html을 열면 빈 페이지가 나타납니다

다음으로 여러 측면에서 분석하겠습니다 :

1. 패키징 시 전체 리소스 경로

실제 상황에 따라 /인지 ./인지 판단합니다

vue-ui에서 구성:

vue.config.js에서 구성:

module.exports = {
//基本路径 文件打包后放的位置
publicPath:‘./'，
 
//默认输出文件夹为dist，填入的名字为打包后的文件名
outputDir:‘name',
 
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。资源放的目录
assetsDir: “./static”,
 
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 index的路劲和名字
indexPath: ‘./index.html',
 
//打包后是否生成map文件，map文件能看到错误代码位置，设置为false不生成map文件，打包体积缩小
productionSourceMap: false,
}

2. 라우팅 모드

해시 모드인가요, 기록 모드인가요?

호환성이 더 높은 해시 모드입니다. #경로 앞으로는 일부 오류를 방지하기 위해 서버로 전송되지 않습니다

const router = new VueRouter({
  routes,
  mode:'hash',
})

3. 개발 환경과 프로덕션 환경을 전환하는 이유

왜냐하면 우리는 환경을 개발할 때

npm run Serve가 로컬 서버

를 시뮬레이션하기 때문입니다. 결과적으로 포트와 같은 일부 변경 사항의 내용을 요청할 수 없어 빈 페이지가 발생합니다

간단히 로컬 서버를 배포하여 dist를 실행할 수 있습니다

폴더 만들기

• 폴더 터미널에서 npm 초기화 npm init -y

• express npm i express 설치 -S

• 새 폴더에 dist 복사

• app.js 생성 코드 작성

gzip을 활성화하여 축소 파일 크기 및 전송 속도 향상

• 해당 패키지 설치 npm install 압축 -p

• 패키지 가져오기 const 압축 = require('압축')

• 미들웨어 app.use(compression()) 활성화

PM2를 사용하여 애플리케이션 관리

• npm i pm2 -g

• 설치 프로젝트 시작: pm2 start .app.js --custom name

• 실행 중인 프로젝트 pm2 ls

• 보기

  프로젝트 다시 시작 pm2 restart 사용자 정의 이름(ID)

• 프로젝트 중지 pm2 stop 사용자 정의 이름(ID)

• Delete project pm2 delete 사용자 정의 이름(ID)

app.js:

const express = require('express')
const app = express()
 
const compression = require('compression')
 
app.use(compression()) // 一定要把这一行写在 静态资源托管之前
app.use(express.static('./dist'))
 
app.listen(80,()=> {
  console.log('server running at http://127.0.0.1')
})

여기에서 dist를 실행하고 백엔드 형제에게 주는 것은 문제가 되지 않습니다

4. 빌드를 실행하기 전에 일부 최적화를 수행할 수 있습니다

vue.confjg.js 서비스 및 빌드 항목 파일에서 로컬 설정 설정

module.exports = {
  chainWebpack:config=>{
    //发布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      //entry找到默认的打包入口，调用clear则是删除默认的打包入口
      //add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')
 
      //使用externals设置排除项
      config.set('externals',{
        vue:'Vue',
        axios:'axios',
        lodash:'_',
        echarts:'echarts',
        nprogress:'NProgress',
      })
 
// 在项目的根目录创建一个vue.config.vue文件，添加上 chainWebpack，修改args里的参数配置，重新返回就可以  这里是 判断是开发版本 还是 发布版本
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
 
    })
    //开发模式
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/main-dev.js')
 
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
 
  }
}

• main-dev.js 개발 버전의 메인 입구 main-dev.js 开发版本总入口

• main-prod.js

main-prod.js 릴리스 버전의 메인 입구는 여기를 기반으로 합니다. 개발 버전은 불필요한 종속성을 삭제하고 cdn을 사용하여 라우팅 지연 로딩 플러그인을 도입 및 구성하도록 개선되었습니다...🎜🎜🎜

위 내용은 vue3 프로젝트가 패키징되어 서버에 게시된 후 액세스 페이지가 공백으로 표시되는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!