단일 페이지를 여러 페이지로 생성하기 위한 Vue-cli 메서드 예제 코드

일부 프로젝트의 경우 단일 페이지가 요구 사항을 잘 충족할 수 없으므로 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,

항목이 무엇인지 걱정하지 마세요. 아래를 살펴보세요.

메서드를 추가하세요.

//获取入口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의 플러그인에서

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));
}

Modify 이 파일이 바로 그것입니다.

(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 ;

하지만 webpack.test.conf.js 파일은 아직 수정되지 않았기 때문에 변경해야 합니다.

var env = config.build.env

webpackConfig의 플러그인에서

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

를 주석 처리하고 선언 뒤에 다음 코드를 추가하여 webpackConfig를 정의합니다.

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 변수로 바꾸세요. 패키지된 디렉터리 계층 구조를 수정하려면 빌드에서 수정할 수도 있습니다. 예를 들어 fabfile.py 및 favicon.ico를 디렉터리에 복사해야 합니다. dist 디렉터리에서 빌드에 속성을 정의할 수 있습니다.

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

그러면 webpack.prod.conf.js에 'copy-webpack-plugin'이 도입되었기 때문입니다(var CopyWebpackPlugin = require('copy-webpack-plugin') )), 우리는 webpackConfig.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 디렉토리에 페이지 폴더를 추가하세요

디렉토리의 계층 구조는 다음 형식과 유사하게 배열됩니다:

5. Packaging

위 수정을 완료하세요. 로컬에서 실행하는 데는 문제가 없지만 패키징 후에도 여전히 문제가 있으며 오류가 나타납니다. webpackJsonp가 정의되지 않았습니다.
해결 방법은 다음과 같습니다. for(페이지의 var 경로 이름) ) webpack.prod.conf.js 파일 아래의 루프 정의된 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 파일을 수정하면 후속 수정이 성공한 후 보충 추가가 계속됩니다.

관련 추천:

vue 구성 다중 페이지 애플리케이션 예제 코드 공유

vue cli 재구성 다중 페이지 스캐폴딩 예제 공유

Vue-cli를 다중 페이지를 지원하는 기록 모드로 변환하는 방법

위 내용은 단일 페이지를 여러 페이지로 생성하기 위한 Vue-cli 메서드 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!