vue.js - 基本配置

这一章，主要讲下vue基于vue-cli 脚手架做项目时遇到的一些问题及解决方案。

首页，vue做多页面的项目，如官网的制作，该怎么配置页面呢？

下面就来讲下，我是如何配置的吧。

首先：先找到 \build\webpack.base.conf.js文件，在代码中找到出现module.exports的地方，可以看到entry

配置如下：

app: './src/main.js', // 源文件已有的
news: './src/js/news.js', // news、strategy、material都是自己加的，有多少个子页面就加多少个入口
strategy: './src/js/strategy.js',
material: './src/js/material.js'

第二步：找到\build\webpack.dev.conf.js文件，在代码中找到module.exports的地方，可以看到plugins

配置如下：

　　
　　// 源代码已有
　　new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app']
    }),
　　// 以下为配置添加，根据子页面进行添加
    new HtmlWebpackPlugin({
      filename: 'news.html',
      template: 'news.html',
      inject: true,
      chunks: ['news']
    }),
    new HtmlWebpackPlugin({
      filename: 'strategy.html',
      template: 'strategy.html',
      inject: true,
      chunks: ['strategy']
    }),
    new HtmlWebpackPlugin({
      filename: 'material.html',
      template: 'material.html',
      inject: true,
      chunks: ['material']
    }),

第三步：找到/build/webpack.prod.conf.js文件，找到HTMLWebpackPlugin所在的地方

配置如下：

　　// 源代码已有
　　new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : 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']
    }),
　　// 以下均为自己配置的文件
    new HtmlWebpackPlugin({
      filename: config.build.news,
      template: 'news.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'news']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.strategy,
      template: 'strategy.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'strategy']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.material,
      template: 'material.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'material']
    }),

第四步：找到\config\index.js文件，并找到build

配置如下：

    index: path.resolve(__dirname, '../dist/index.html'),  // 源文件已有
    news: path.resolve(__dirname, '../dist/news.html'), // 以下均为配置文件
    strategy: path.resolve(__dirname, '../dist/strategy.html'),
    material: path.resolve(__dirname, '../dist/material.html'),

最后需要修改每个页面的xx.js,xx.vue文件，这里以news为例。

news.js

import Vue from 'vue'
import news from './news.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#news',
  render: h => h(news)
})

news.vue

<template>
  <div id="news">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'news',
  data () {
    return {
      msg: 'I am news'
    }
  }
}
</script>

news.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>news</title>
  </head>
  <body>
    <div id="news"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

最后是主页面app.vue

<template>
  <div id="app">
    <a href="news.html">news</a><br>
    <a href="material.html">material</a><br>
    <a href="strategy.html">strategy</a><br>
  </div>
</template>

然后重启 npm run dev 

就可以看到如下图界面

这个时候vue多页面配置就大功告成了。

posted @ 2018-01-17 14:45  Lafitewu  阅读(214)  评论(0)  编辑  收藏  举报