Vue-cli 프로젝트 를 한 페이지 에서 여러 페이지 로 만 드 는 방법

일부 항목 에 있어 서 한 페이지 가 수 요 를 잘 만족 시 키 지 못 하기 때문에 vue-cli 가 만 든 한 페이지 항목 을 여러 페이지 항목 으로 바 꿔 야 합 니 다.
다음 파일 을 수정 해 야 합 니 다:
1.다운로드 의존 glob

$npm install glob --save-dev

2.build 의 파일 수정
(1)webpack.base.conf.js 수정
다음 코드 추가:

var glob = require('glob')；
var entries = getEntry('./src/pages/**/*.js')

module.exports 의

entry: {
   app: './src/main.js'
  },

주석 을 지우 고 이 줄 코드 를 추가 합 니 다:

 entry: entries,

entries 가 무엇 인지 서 두 르 지 말고 아래 를 보 세 요.
방법 추가:

//    js  
function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  pathname = basename.split("_")[0]; //index_main.js  index
  entries[pathname] = entry;
 });
 return entries;
}

이 파일 을 이렇게 수정 하면 됩 니 다.
(2)webpack.dev.conf.js 수정
다음 코드 추가:

//  
var glob = require('glob')
var path = require('path')

module.exports 의 plugins 에 있 는

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),

주석 을 지우 고 다음 코드 를 추가 합 니 다:

function getEntry(globPath) {
 
 var entries = {},basename;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 //      html  ，     
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname],  //     
  inject: true,       // js    
  chunks:[pathname]
 };
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

이 파일 은 여기까지 만 수정 하면 됩 니 다.
（3）webpack.prod.conf.js
이 파일 의 수 정 된 방식 은 이전 파일 과 유사 합 니 다.
 다음 코드 추가:var glob=require('glob')는 프로젝트 를 만 들 때 선택 할 수 있 는 모든 의존 도 를 yes 로 선택 하기 때문에 프로젝트 의 env 성명 정 의 는 다음 과 같 습 니 다.

var env = process.env.NODE_ENV === 'testing ? require('../config/test.env') : config.build.env ;

그러나 웹 팩.test.conf.js 파일 이 아직 수정 되 지 않 았 기 때문에 이 줄 의 성명 을 다음 줄 로 바 꿔 야 합 니 다.

var env = config.build.env

웹 팩 Config 의 plugins 에 있 는

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
}),

설명 이 떨 어 지면 웹 packConfig 를 정의 하 는 성명 뒤에 다음 코드 를 추가 합 니 다.

function getEntry(globPath) {
 var entries = {},
  basename;
 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 var conf = {
   filename: process.env.NODE_ENV === 'testing'
    ? pathname + '.html'
    : config.build[pathname],
   template: pages[pathname],
   inject: true,
   minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
   },
   chunks:[pathname]
  }
 webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

이때 이 서류 도 다 수정 되 었 다.
3.config 의 파일 수정
이 폴 더 에서 하나의 파일 만 수정 해 야 합 니 다.index.js 이 파일 의 역할 은 파일 경 로 를 찾 은 다음 에 이 파일 이 설정 한 디 렉 터 리 등급 에 따라 포 장 된 파일 과 해당 하 는 등급 의 파일 구 조 를 생 성 하 는 것 입 니 다.다음 코드 추가:

var build = {
 env: require('./prod.env'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,
 productionGzip: false,
 productionGzipExtensions: ['js', 'css']
}

function getEntry(globPath) {
 var entries = {},basename;

 glob.sync(globPath).forEach(function(entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');
 
//   index: path.resolve(__dirname, '../dist/index.html')
for (var pathname in pages) {
 build[pathname] = path.resolve(__dirname, '../dist/' + pathname + '.html')
}

그리고 module.exports 의 build 값 을 방금 설명 을 추가 한 변수 build 로 바 꿉 니 다.포장 후의 항목 등급 구 조 를 수정 하려 면 build 에서 수정 할 수 있 습 니 다.또한 build 에 우리 가 정의 해 야 할 변 수 를 추가 할 수 있 습 니 다.예 를 들 어 fafile.py 와 favicon.ico 를 dist 디 렉 터 리 에 있 는 a 디 렉 터 리 에 복사 하면 build 에서 속성 을 정의 할 수 있 습 니 다.

distA:path.resolve(__dirname, '../dist/a), 

그리고 웹 팩.prod.conf.js 에'copy-webpack-plugin'(var CopyWebpackplugin=require('copy-webpack-plugin')이 도입 되 었 기 때문에 웹 팩 Config.plugins 에 다음 코드 를 추가 할 수 있 습 니 다.

new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../fabfile.py'),
   to: config.build.distA,
   template: 'fabfile.py'
  }
 ])
new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../favicon.ico'),
   to: config.build.distA,
   template: 'favicon.ico'
  }
 ])

src 디 렉 터 리 에 pages 폴 더 추가
디 렉 터 리 의 등급 구 조 는 이런 형식 으로 배정 된다.

5.포장
이상 의 수정 을 마 쳤 습 니 다.로 컬 실행 에 문제 가 없 지만 포장 후에 문제 가 있 을 수 있 습 니 다.오류 가 발생 할 수 있 습 니 다:webpackJSonp is not defined
해결 방법 은 다음 과 같 습 니 다.webpack.prod.conf.js 파일 의 for(var pathname in pages)순환 에서 정 의 된 conf 에 두 줄 코드 를 추가 합 니 다.

chunksSortMode: 'dependency', // dependency       js        ；manual       js     chunks         ；

chunks: ['manifest', 'vender', pathname] //          js，'manifest', 'vender'   js webpack                  ，  ，'manifest'   'vender'      ，     js         pathname   'vender'，'vender'  'manifest'.

다시 말 하면 이번 프로젝트 가 단일 페이지 에서 다 중 페이지 프로젝트 로 전환 하 는 과정 입 니 다.webpack.test.conf.js 파일 의 수정 에 대해 후속 수정 이 성공 하면 계속 추가 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.