cli를 사용하여 vue에서 다중 페이지 스캐폴딩을 재구성하는 방법

이 글에서는 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())

구성이 완료되었습니다. 정상적으로 프로젝트를 시작하면 됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

jQuery에서 가장자리에서 튀어오르는 애니메이션 효과를 얻는 방법은 무엇입니까?

Vue가 배열이나 객체의 변경 사항을 감지할 수 없는 문제를 해결하는 방법은 무엇입니까?

Vue의 감지 시퀀스에 객체의 새로운 속성을 추가하는 방법은 무엇입니까?

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