집 > 기사 > 웹 프론트엔드 > vue+cli 단일 페이지 스캐폴딩을 다중 페이지 스캐폴딩으로 변환하는 방법

vue+cli 단일 페이지 스캐폴딩을 다중 페이지 스캐폴딩으로 변환하는 방법

php中世界最好的语言원래의: 2018-04-13 11:34:551502검색

이번에는 vue+cli 단일 페이지 스캐폴딩을 멀티 페이지 스캐폴딩으로 변환하는 방법을 가져오겠습니다. vue+cli 단일 페이지 스캐폴딩을 멀티 페이지 스캐폴딩으로 변환할 때 주의해야 할 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

공식적으로 제공되는 프로젝트 생성 도구인 vue-cli는 다중 페이지 webApp을 지원하지 않지만 실제 프로젝트에서는 이러한 스캐폴딩이 필요합니다. 많은 전문가의 방법을 참조하여 변환하는 솔루션입니다. 다중 페이지 비계에 대한 내용은 참고용입니다. 혹시 잘못된 점이 있으면 정정해주세요.

준비하세요

vue-cli를 사용하여 필요한 단일 페이지 프로젝트 스캐폴딩을 생성한 다음 수정 프로젝트를 시작합니다.

재건 과정

1단계 디렉터리 구조

변경 step1 src 디렉터리 아래에 새 views 폴더를 만든 다음 views 폴더 아래에 새 index 폴더를 만듭니다

step2 src 디렉터리에 있는 main.js와 App.vue를 step1의 index 폴더로 이동하고, main.js 이름을 index.

로 변경합니다. step3 src 디렉터리에 있는 router 폴더를 step1에서 index 폴더로 이동합니다. router를 사용하지 않는 경우 index.js에서 주석 처리할 수 있습니다. 각 페이지가 단일 페이지 애플리케이션이 아니기 때문에 사용하지 않았습니다. 이므로 라우팅 기능

을 사용하세요. step4 루트 디렉터리에 있는 index.html 파일을 step1

의 index 폴더로 이동합니다. 2단계 build 아래의

구성 파일을 수정합니다.

프로덕션 환경에서는 고유한 js 파일이 페이지로 패키지화되고 공용 js 파일이 모두 하나의 덩어리로 패키지화되지 않습니다. 패키징 후의 파일 디렉터리 구조도 비교적 명확합니다. 모든 수정사항은 빌드 폴더에 있습니다

step1 utils.js를 수정하고 두 가지 기능을 추가합니다. 하나는 페이지의 여러 항목을 가져오는 데 사용되고 다른 하나는 패키지된 페이지를 입력하는 데 사용되며 js를 삽입합니다.

var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(dirname, '../src/views')
var merge = require('webpack-merge')
//多入口配置
//获取views文件夹下，每个页面下的index.js作为页面入口，故每个页面下都必须有index.js
exports.entries = function() {
 var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
 var map = {}, tmp = [], pathname = '';
 entryFiles.forEach((filePath) => {
 var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 map[tmp[2] + '/' + filename] = filePath
 })
 return map
}
//多页面输出配置
//读取views文件夹下的对应每个页面的html后缀文件，然后放入数组中
//如果想要更深的定制或者修改，建议大家看一下CommonsChunkPlugin
//推荐一个基础的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
 let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
 let arr = []
 entryHtml.forEach((filePath) => {
 let jsPath = '', tmp = [];
 let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 jsPath = tmp[2] + '/' + 'index'
 let conf = {
  template: filePath,
  filename: filename + '.html',
  chunks: ['manifest', 'vendors', jsPath],
  inject: true
 }
 if (process.env.NODE_ENV === 'production') {
  conf = merge(conf, {
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
  })
 }
 arr.push(new HtmlWebpackPlugin(conf))
 })
 return arr
}
step2 修改webpack.base.conf.js文件配置的入口
// entry: {
// app: './src/main.js'
// },
entry: utils.entries(),
step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码，将其注释掉：
new HtmlWebpackPlugin({
 filename: 'index.html',
 template: 'index.html',
 inject: true
}),

플러그인 속성 값 뒤에 위의 메소드를 추가하세요. 코드 조각은 다음과 같습니다.

// new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // }),
 new FriendlyErrorsPlugin()
 ].concat(utils.htmlPlugin())
step4 修改webpack.prod.conf.js 找到下面的代码，注释掉：
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 // more options:
 // https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),

플러그인 속성 값 뒤에 위의 메소드를 추가하세요. 코드 조각은 다음과 같습니다.

new CopyWebpackPlugin([{
  from: path.resolve(dirname, '../static'),
  to: config.build.assetsSubDirectory,
  ignore: ['.*']
 }])
 ].concat(utils.htmlPlugin())

구성이 완료되었습니다. 그냥 정상적으로 프로젝트를 시작하세요.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!