vue-cli를 사용하여 다중 페이지 애플리케이션을 개발하는 간단한 예

프로젝트 만들기

vue-cli를 사용하여 프로젝트 만들기vue-cli 创建一个项目

$ vue init webpack vue-multiple-demo

根据控制台的提示，填写相关信息即可。创建完成后，进入该项目根目录并安装依赖。

$ cd vue-multiple-demo
$ npm install

由于是开发多页面应用，该工程就没有配置 vue-router。

最简示例

通过 vue-cli 创建的项目，默认是开发单页应用。如果希望开发多页面，需要调整部分脚本的配置。

入口

在 src 目录下新建一个 demo.js，为方便起见，直接将 main.js 中的内容复制过去。然后，修改 build/webpack.base.conf.js 的 entry 为多个。

entry: {
  app: './src/main.js',
  demo: './src/demo.js'
},

模板

在工程根目录下新建一个 demo.html 文件，同样将 index.html 的内容复制过去。为了区分开来，只编辑下 <title> 的内容。

<title>demo</title>

发布地址

在 config/index.js 的 build 配置下，新增一条记录。

index: path.resolve(__dirname, '../dist/index.html'),
demo: path.resolve(__dirname, '../dist/demo.html'),

生产环境配置

调整 build/webpack.prod.conf.js 的 plugins 中，关于 html 的配置。

修改

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',
  chunks: ['manifest', 'vendor', 'app']
}),

这里主要有两处改动

• filename 直接写死

• 为防止加载不必要的 js，添加 chunks 配置。

新增

new HtmlWebpackPlugin({
  filename: config.build.demo,
  template: 'demo.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',
  thunks: ['manifest', 'vendor', 'demo']
}),

预览效果

这里不启动本地服务，所以需要修改下静态资源的加载路径，即将 config/index.js 中 build->assetsPublicPath 修改为 ./。

assetsPublicPath: './',

构建应用

$ npm run build

直接打开 dist 目录中的 html 文件，即可预览效果。

小结

至此，开发多页面的最简示例就完成了。

进一步优化

实际开发中，页面的数量较多，因而需要批量处理以下配置。

文件目录

源码部分 src 的目录结构如下

• assets

• logo.png

• components

• HelloWorld.vue

• entries

• index.js

• list.js

• templates

• index.html

• list.html

按照约定

• entries 用于存放页面入口的 js 文件

• templates 用于存放页面的模板 html 文件

读取目录

为方便读取页面目录，这里使用 glob 扩展一个方法。

$ npm install glob --save-dev

安装完依赖后，在 build/utils.js 中添加方法

const glob = require('glob')

// 遍历指定目录下的文件
exports.getEntries = (dirPath) => {
  let filePaths = glob.sync(dirPath);
  let entries = {};
  filePaths.forEach(filePath => {
    let filename = filePath.match(/(\w+)\.[html|js]+/)[1];
    entries[filename] = filePath;
  })
  return entries;
}

修改配置

build/webpack.base.conf.js

entry: utils.getEntries('./src/entries/*.js'),

build/webpack.base.prod.conf.js

删除原有的 HtmlWebpackPlugin 相关配置，在文件结束之前遍历添加相关配置即可。

const pages = utils.getEntries('./src/templates/*.html');
for(let page in pages) {
  let fileConfig = {
    filename: path.resolve(__dirname, '../dist/pages/' + page + '.html'),
    template: pages[page],
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    thunks: ['manifest', 'vendor']
  };
  fileConfig.thunks.push(page);
  // 添加插件配置
  webpackConfig.plugins.push(new HtmlWebpackPlugin(fileConfig));
}

config/index.js

由于输出的地址不在这里配置，之前的删不删除都不影响。但是，调整了目录结构，页面中加载静态资源的路径也要做出调整。

assetsPublicPath: '../',

构建并预览

$ npm run build

构建完成后，直接使用浏览器打开 dist 目录下的 html 文件即可预览效果。

总结

简单总结以下，使用 vue-cli 开发多页面应用的几个关键点。

• 多入口

• 多个 HtmlWebpackPluginrrreee

  콘솔 프롬프트에 따라 관련 정보를 입력하세요. 생성 후 프로젝트의 루트 디렉터리로 이동하여 종속성을 설치합니다.
rrreee

다중 페이지 애플리케이션을 개발 중이므로 이 프로젝트에는 vue-router가 구성되어 있지 않습니다.

• 가장 간단한 예
  vue-cli를 통해 생성된 프로젝트는 기본적으로 단일 페이지 애플리케이션을 개발합니다. 여러 페이지를 개발하려면 일부 스크립트의 구성을 조정해야 합니다.

입구

src 디렉토리에 새로운 demo.js를 생성하세요. 편의를 위해 main.js를 직접 추가하세요. 의 내용을 복사합니다. 그런 다음 build/webpack.base.conf.js의 항목을 다중으로 수정합니다.

rrreee

템플릿

프로젝트 루트 디렉터리에 새 demo.html 파일을 만들고 index.html의 내용도 복사하세요. 이를 구별하려면 <title>의 내용만 편집하세요.

rrreee

릴리스 주소

config/index.js의 build 구성 아래에 새 레코드를 추가하세요.

rrreee

제작 환경 구성

html 구성에 대해 플러그인에서 build/webpack.prod.conf.js를 조정합니다. . 수정

rrreee여기에는 두 가지 주요 변경 사항이 있습니다

filename 직접 작성하여 죽음에

불필요한 js가 로드되는 것을 방지하려면 청크 구성을 추가하세요.



신규

rrreee

미리보기 효과

🎜여기서 로컬 서비스가 시작되지 않으므로 정적 리소스의 로딩 경로, 즉 config를 수정해야 합니다. build->assetsPublicPath의 /index.js 가 ./로 변경되었습니다. 🎜rrreee🎜애플리케이션 빌드🎜rrreee🎜효과를 미리 보려면 dist 디렉터리에 있는 html 파일을 직접 엽니다. 🎜

요약

🎜이제 다중 페이지 개발의 가장 간단한 예제가 완성되었습니다. 🎜🎜추가 최적화🎜🎜실제 개발에서는 페이지 수가 많아 다음 구성을 일괄 처리해야 합니다. 🎜

파일 디렉터리

🎜소스코드 부분 src의 디렉터리 구조는 다음과 같습니다🎜
🎜🎜assets🎜🎜
🎜🎜logo.png🎜🎜🎜🎜🎜comComponents🎜🎜
🎜🎜HelloWorld.vue🎜🎜🎜🎜🎜entries🎜🎜
🎜🎜index. js🎜🎜🎜🎜 list.js🎜🎜🎜🎜🎜templates🎜🎜
🎜🎜index.html🎜🎜🎜🎜list .html🎜🎜🎜 🎜🎜계약에 따라🎜
🎜🎜entries는 페이지의 js 파일을 저장하는 데 사용됩니다. 항목🎜🎜🎜🎜템플릿 페이지를 저장하는 데 사용되는 템플릿 html 파일🎜🎜🎜

디렉토리 읽기

🎜페이지 디렉토리 읽기를 용이하게 하려면 glob는 여기에서 사용됩니다. 메소드를 확장합니다. 🎜rrreee🎜종속성을 설치한 후 build/utils.js🎜rrreee

구성 수정

build/webpack.base.conf.js

에 메서드를 추가하세요. rrreee

build/webpack.base.prod.conf.js

🎜 원본 HtmlWebpackPlugin 관련 구성을 삭제하고, 파일이 끝나기 전에 관련 구성을 순회하여 추가하세요. 🎜rrreee

config/index.js

🎜여기서 출력 주소가 구성되지 않으므로 이전 삭제는 영향을 미치지 않습니다. 그러나 디렉터리 구조를 조정한 후에는 페이지에서 정적 리소스를 로드하기 위한 경로도 조정해야 합니다. 🎜rrreee

빌드 및 미리보기

rrreee🎜구성이 완료된 후 브라우저를 사용하여 직접 dist 디렉토리에 있는 html 파일을 열어서 미리보기하세요. 효과. 🎜🎜요약🎜🎜다중 페이지 애플리케이션을 개발하기 위해 vue-cli를 사용하는 몇 가지 핵심 사항에 대한 간략한 요약입니다. 🎜
🎜🎜여러 항목🎜🎜🎜🎜여러 HtmlWebpackPlugin🎜🎜🎜🎜정적 리소스 경로🎜🎜🎜🎜이 문서에 소개된 구성은 그렇지 않습니다. 모든 개발 시나리오에 적용 가능해야 합니다. 점점 더 많은 세부 사항을 최적화하려면 실제 개발에서 지속적인 연습이 필요합니다. 🎜🎜관련 권장 사항: 🎜🎜🎜vue는 다중 페이지 애플리케이션 예제 코드 공유를 구축합니다. 🎜🎜🎜🎜단일 페이지를 여러 페이지 예제 코드로 생성하는 Vue-cli 메서드 🎜🎜🎜🎜vue cli 재구성 다중 페이지 스캐폴딩 예제 공유 🎜🎜 🎜🎜 🎜🎜🎜🎜

위 내용은 vue-cli를 사용하여 다중 페이지 애플리케이션을 개발하는 간단한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!