일부 프로젝트의 경우 단일 페이지가 요구 사항을 잘 충족할 수 없으므로 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-cli를 다중 페이지를 지원하는 기록 모드로 변환하는 방법
위 내용은 단일 페이지를 여러 페이지로 생성하기 위한 Vue-cli 메서드 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!