VueJS 앱이 비어 있음

VueJS 앱이 비어 있음

나는 이 repo https://github.com/auth0-blog/vue-jwt-authentication에 vueJS 앱 복제를 시작했다.나는 그것과 함께 며칠 동안 발전해왔고 그것과 함께 몇 페이지를 발전시켰다.나중에 그것이 Vue1.0이라는 것을 깨달았다.그리고 나서 나는 https://github.com/vuejs/vue-migration-helper을 사용했고 vue 2.0으로 이주했다.나는 모든 오류를 하나하나 고쳤다.

지금 내가 앱을 실행하면, 아무 오류도 보이지 않을 뿐인데 비어있다.브라우저 콘솔이나 npm 터미널에서도 오류가 발생하지 않는다.Inspect 요소에서,<div id="app"></div>비어있었다.누군가 시간을 좀 내줘.여기 리포 안에 암호가 있어https://bitbucket.org/AswinKP/vuesample.내가 어디서 실수했는지 그냥 알 수가 없어서 전체 리포(repo)를 공유한다.

나는 이것에 대해 연구해왔고 어떤 문제도 찾을 수 없다.나는 vue js 초보자인데, 지난 이틀 동안 이것 때문에 고생하고 있어.미리 고맙다.

몇 가지 오류가 있다.첫째로 레포는 전혀 컴파일할 수 없다.

index.js:8 및:37에 있는 파일components/IncidentTrendI7.vue존재하지 않아, 그냥 이 두 줄을 제거해.

그리고build.js너의 안에 포함되어 있지 않다.index.html덧셈을<script src="build/build.js"></script>수동으로index.html

마지막은 너의 뿌리 구성 요소야.Vue 2.0에서 앱을 렌더링하려면 렌더링 기능이 필요하므로(또는 독립 실행형 빌드를 사용하지만 런타임 전용 버전이 선호되는 경우 템플릿).index.js다음과 같이 보일 것이다:

const app = new Vue({
  el: '#app',
  router,
  render: h => h(App),
  components: { App }
})

해결한 문제와 동일한 문제에 직면하여 기본적으로 라우터 웹 히스토리에 기본 URL을 추가하십시오.

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vue/dist/' : '/'
}

const router = createRouter({
  history: createWebHistory('/vue/dist'),
  routes,
});

다음 줄 변경:

import Home from './components/Home.vue' 

다음으로:

import Home from '@/components/Home'

나는 똑같은 문제를 이렇게 풀었다.

새로운 vue-cli V3를 사용하면 파일에서 빌드 프로세스에 대한 설정을 사용자 지정할 수 있다.

vue.config.js

페이지-개체를 추가할 수 있다.이 설정(기본 파일 구조에 적용됨)으로 "no error, blank Page"라는 효과를 얻었다.

항목:'src/main.js'

개발 모드에서는 작동하지 않는 것 같으며, 빌드 모드도 작동하고 있었다.

pages: {
  index: {
    // entry for the page
    entry: 'src/main.js',
    // the source template
    template: 'public/index.html',
    // output as dist/index.html
    filename: 'customname.html',
    // when using title option,
    // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %</title>
    title: 'Print Label'
      }

참조URL: https://stackoverflow.com/questions/41432135/vuejs-app-is-blank