vue cli를 기반으로 다중 페이지 스캐폴딩을 재구성하는 프로세스 소개

이 글에서는 vue cli를 기반으로 다중 페이지 스캐폴딩을 재구성하는 과정을 단계별로 소개합니다. 매우 훌륭하고 참고할 만한 가치가 있습니다. 필요한 친구가 참고할 수 있습니다.

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

준비

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

재구축 과정

1단계 디렉터리 구조 변경

• step1 src 디렉터리 아래에 새로운 views 폴더를 생성한 후 views 폴더 아래에 index 폴더를 생성합니다

• step2 src 디렉토리 1단계에서 main.js와 App.vue를 index 폴더로 이동하고, main.js 이름을 index.js

• 으로 변경합니다. 3단계 src 디렉토리에 있는 라우터 폴더를 1단계에서 index 파일로 이동하지 않으면 라우터를 사용하면 index.js에서 주석 처리할 수 있습니다. 각 페이지가 단일 페이지 애플리케이션이 아니고 라우팅 기능을 사용할 필요가 없기 때문에 사용하지 않습니다.

• step4 인덱스 변경. 루트 디렉터리의 .html 1단계에서 파일을 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 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

Vue 2.0이 IE11에서 빈 프로젝트 페이지를 여는 문제를 해결하는 방법

Vuex@2.3.0

VUEJS 2.0 하위 com의 상태 지원 기능에 대한 설명 액세스/상위 구성 요소 호출

위 내용은 vue cli를 기반으로 다중 페이지 스캐폴딩을 재구성하는 프로세스 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!