.net mvc5 환경의 webpack vue 컴파일러

컴파일 할 때 Vue.js와 webpack을 사용하는 MVC5 .Net 솔루션이 있습니다. 프로젝트 초기에 .vue 파일을 분리 된 .js 파일로 컴파일하기로 결정했습니다. 그러나 .vue 파일이 20 개가 넘으면 고통 스럽습니다. 내 질문 :.net mvc5 환경의 webpack vue 컴파일러

이 webpack 구성을 단일 .js 파일로 컴파일하도록 변환하려면 어떻게해야합니까?

const fs = require("fs"); 
const path = require("path"); 

// build an object that looks like 
// { 
//  "filename": "./filename.vue" 
// } 
// to list the entry points for webpack to compile. 
function buildEntry() { 
    const reducer = (entry, file) => { entry[file.split(".").shift()] = 
`./Vue/${file}`; return entry; }; 

    return fs.readdirSync(path.join(__dirname, "Vue")) 
     .filter(file => file.endsWith(".vue")) 
     .reduce(reducer, {}); 
} 

module.exports = { 
    entry: buildEntry(), 
    output: { 
     path: path.join(__dirname, "Vue"), 
     filename: "[name].js", 
     library: "[name]" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.vue$/, loader: 'vue-loader' }, 
     ], 
    } 
}

출처

2017-09-07 Adrian Godoy

단일 진입 점이 있습니다. 이렇게하려면 가져 오기를 사용하거나 응용 프로그램에서 필요로하는 것을 요구하는 JS 파일이 있어야합니다.

독립적 인 작은 Vue 앱이 여러 개인 경우 웹팩 구성을 여러 개 만들어야 할 것입니다.

편집 : Vue CLI를 사용하여 템플릿에서 기본 프로젝트를 설정 한 다음 Webpack 설정 등을 이해하기 위해 Vue CLI를 사용하는 것이 좋습니다. https://github.com/vuejs-templates/webpack/tree/develop/template.

출처

2017-09-07 09:43:34

나는 단지 1 개의 vue 응용 프로그램 만 가지고있다. 나는 그것을 작동시킬 수 있는지 알아보기 위해 시도 할 것이다. –

이 엔트리 포인트가 어떻게 쓰여지는지 알 수있는 예제 나 링크가 있는가? –

다음은 그 예입니다 : https://github.com/vuejs-templates/webpack/blob/develop/template/src/main.js. vue CLI가 템플릿으로 사용하는 템플릿입니다. 템플릿 요소를 무시하면 Vue, 라우터 및 기타 항목을 가져 와서 기본 Vue Intance를 탑재합니다. 라우터는 일반적으로 다른 구성 요소에 대한 경로를 정의하므로 거기에 가져옵니다. 따라서 종속성을 연결합니다. 이 방법은 단일 진입 점을 사용하여 종속성 트리에서 사용되는 다른 모든 것을 멋지게 묶을 것입니다. –

.net mvc5 환경의 webpack vue 컴파일러

답변

관련 문제