Vue cli 리팩토링 다중 페이지 스캐폴딩 예제 공유-리눅스 운영 및 유지 관리-php.cn

Vue cli 리팩토링 다중 페이지 스캐폴딩 예제 공유

小云云

풀어 주다： 2018-01-24 13:17:18

원래의

2341명이 탐색했습니다.

공식적으로 제공되는 프로젝트 생성 도구인 vue-cli는 다중 페이지 webApp을 지원하지 않지만 실제 프로젝트에서는 이러한 스캐폴딩이 필요합니다. 이 기사에서는 단일 페이지 스캐폴딩의 변환을 제공합니다. 귀하의 참고를 위한 다중 페이지 비계 솔루션입니다. 혹시 잘못된 점이 있으면 정정해주세요.

준비

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

재구축 과정

1단계 디렉토리 구조 변경

step1 src 디렉토리 아래에 새로운 views 폴더를 생성한 후 views 폴더 아래에 새로운 index 폴더를 생성합니다
step2 src에서 main.js 변경 1단계에서 App.vue를 index 폴더로 이동하고 main.js의 이름을 index.js
step3 src 디렉터리의 라우터 폴더를 1단계에서 index 폴더로 이동합니다. 사용하지 않을 경우 Router를 주석 처리할 수 있습니다. index.js에 있는데 각 페이지가 단일 페이지 애플리케이션이 아니고 라우팅 기능을 사용할 필요가 없기 때문에 사용하지 않았습니다
step4 루트 디렉터리에 있는 index.html 파일을 step1로 이동합니다. index 폴더 아래

Step 2 build 아래 구성 파일 수정

프로덕션 환경에서는 고유한 js 파일이 페이지 단위로 패키징되고 public 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
}),

로그인 후 복사

In 플러그인 속성 값 뒤에 위 메서드를 추가합니다. 다음은 코드 조각입니다.

// 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())

로그인 후 복사

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