vue配置多頁面

changfeng1050 發(fā)布于2019-08-22 17:26 / 1140人閱讀

摘要：安裝環(huán)境安裝并添加入環(huán)境變量安裝淘寶鏡像安裝安裝腳手架創(chuàng)建項(xiàng)目模板進(jìn)入到要放項(xiàng)目的文件夾安裝目錄結(jié)構(gòu)調(diào)整配置文件修改添加依賴返回目錄中的所有子文件修改文件夾中的文件新增代碼頁面模板取得相應(yīng)的頁面路徑，因?yàn)橹暗呐渲茫?/p>

1.安裝環(huán)境

安裝node.js 并添加入環(huán)境變量PATH

安裝淘寶NPM鏡像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝webpack

npm install webpack -g

安裝vue-cli腳手架

npm install -g vue-cli

創(chuàng)建項(xiàng)目模板 vue init wepack vue-multipage-demo

cmd進(jìn)入到要放項(xiàng)目的文件夾

安裝 cnpm install

2.目錄結(jié)構(gòu)調(diào)整

3.配置文件修改

添加依賴 glob （返回目錄中的所有子文件）
npm install glob

修改build文件夾中的utils.js文件

//新增代碼
var glob = require("glob");
// 頁面模板
var HtmlWebpackPlugin = require("html-webpack-plugin");
// 取得相應(yīng)的頁面路徑，因?yàn)橹暗呐渲茫允莝rc文件夾下的pages文件夾
var PAGE_PATH = path.resolve(__dirname, "../src/pages");
// 用于做相應(yīng)的merge處理
var merge = require("webpack-merge");


//多入口配置
// 通過glob模塊讀取pages文件夾下的所有對應(yīng)文件夾下的js后綴文件，如果該文件存在
// 那么就作為入口處理

exports.entries = function () {
    var entryFiles = glob.sync(PAGE_PATH + "/*/*.js")
    var map = {}
    entryFiles.forEach((filePath) => {
        var filename = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf("."))
        map[filename] = filePath
    })
    return map
}

//多頁面輸出配置
// 與上面的多頁面入口配置相同，讀取pages文件夾下的對應(yīng)的html后綴文件，然后放入數(shù)組中
exports.htmlPlugin = function () {
    let entryHtml = glob.sync(PAGE_PATH + "/*/*.html")
    let arr = []
    entryHtml.forEach((filePath) => {
        let filename = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf("."))
        let conf = {
            // 模板來源
            template: filePath,
            // 文件名稱
            filename: filename + ".html",
            // 頁面模板需要加對應(yīng)的js腳本，如果不加這行則每個(gè)頁面都會(huì)引入所有的js腳本
            chunks: ["manifest", "vendor", filename],
            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
}

修改webpack.base.conf.js文件

function resolve (dir) {
  return path.join(__dirname, "..", dir)
}

const createLintingRule = () => ({
  test: /.(js|vue)$/,
  loader: "eslint-loader",
  enforce: "pre",
  include: [resolve("src"), resolve("test")],
  options: {
    formatter: require("eslint-friendly-formatter"),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, "../"),
//注釋代碼開始
  // entry: {
  //   app: "./src/main.js"
  // },
//注釋代碼結(jié)束
//新增代碼開始
  entry: utils.entries(),
//新增代碼結(jié)束
  output: {
    path: config.build.assetsRoot,
    filename: "[name].js",
    publicPath: process.env.NODE_ENV === "production"
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      "vue$": "vue/dist/vue.esm.js",
      "@": resolve("src"),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /.vue$/,
        loader: "vue-loader",
        options: vueLoaderConfig
      },
      {
        test: /.js$/,
        loader: "babel-loader",
        include: [resolve("src"), resolve("test"), resolve("node_modules/webpack-dev-server/client")]
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      },
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("media/[name].[hash:7].[ext]")
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it"s native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: "empty",
    fs: "empty",
    net: "empty",
    tls: "empty",
    child_process: "empty"
  }
}

修改webpack.dev.conf.js文件

  plugins: [
    new webpack.DefinePlugin({
      "process.env": require("../config/dev.env")
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    //多頁面輸出配置
    //注釋代碼開始
        // new HtmlWebpackPlugin({
        //   filename: "index.html",
        //   template: "index.html",
        //   inject: true
        // }),
    //注釋代碼結(jié)束
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, "../static"),
        to: config.dev.assetsSubDirectory,
        ignore: [".*"]
      }
    ])
   //新增代碼開始
  ].concat(utils.htmlPlugin())
  //新增代碼結(jié)束
})

修改webpack.prod.conf.js文件

         "use strict"
    const path = require("path")
    const utils = require("./utils")
    const webpack = require("webpack")
    const config = require("../config")
    const merge = require("webpack-merge")
    const baseWebpackConfig = require("./webpack.base.conf")
    const CopyWebpackPlugin = require("copy-webpack-plugin")
    
    const HtmlWebpackPlugin = require("html-webpack-plugin")
    const ExtractTextPlugin = require("extract-text-webpack-plugin")
    const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin")
    const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
    
    const env = process.env.NODE_ENV === "testing"
      ? require("../config/test.env")
      : require("../config/prod.env")
    
    const webpackConfig = merge(baseWebpackConfig, {
      module: {
        rules: utils.styleLoaders({
          sourceMap: config.build.productionSourceMap,
          extract: true,
          usePostCSS: true
        })
      },
      devtool: config.build.productionSourceMap ? config.build.devtool : false,
      output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath("js/[name].[chunkhash].js"),
        chunkFilename: utils.assetsPath("js/[id].[chunkhash].js")
      },
      plugins: [
        // http://vuejs.github.io/vue-loader/en/workflow/production.html
        new webpack.DefinePlugin({
          "process.env": env
        }),
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false
            }
          },
          sourceMap: config.build.productionSourceMap,
          parallel: true
        }),
        // extract css into its own file
        new ExtractTextPlugin({
          filename: utils.assetsPath("css/[name].[contenthash].css"),
          // Setting the following option to `false` will not extract CSS from codesplit chunks.
          // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
          // It"s currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it"s `false`, 
          // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
          allChunks: true,
        }),
        // Compress extracted CSS. We are using this plugin so that possible
        // duplicated CSS from different components can be deduped.
        new OptimizeCSSPlugin({
          cssProcessorOptions: config.build.productionSourceMap
            ? { safe: true, map: { inline: false } }
            : { safe: true }
        }),
        // generate dist index.html with correct asset hash for caching.
        // you can customize output by editing /index.html
        // see https://github.com/ampedandwired/html-webpack-plugin
        //注釋代碼開始
        // 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"
        // }),
        //注釋代碼結(jié)束
        // keep module.id stable when vendor modules does not change
        new webpack.HashedModuleIdsPlugin(),
        // enable scope hoisting
        new webpack.optimize.ModuleConcatenationPlugin(),
        // split vendor js into its own file
        new webpack.optimize.CommonsChunkPlugin({
          name: "vendor",
          minChunks (module) {
            // any required modules inside node_modules are extracted to vendor
            return (
              module.resource &&
              /.js$/.test(module.resource) &&
              module.resource.indexOf(
                path.join(__dirname, "../node_modules")
              ) === 0
            )
          }
        }),
        // extract webpack runtime and module manifest to its own file in order to
        // prevent vendor hash from being updated whenever app bundle is updated
        new webpack.optimize.CommonsChunkPlugin({
          name: "manifest",
          minChunks: Infinity
        }),
        // This instance extracts shared chunks from code splitted chunks and bundles them
        // in a separate chunk, similar to the vendor chunk
        // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
        new webpack.optimize.CommonsChunkPlugin({
          name: "app",
          async: "vendor-async",
          children: true,
          minChunks: 3
        }),
    
        // copy custom static assets
        new CopyWebpackPlugin([
          {
            from: path.resolve(__dirname, "../static"),
            to: config.build.assetsSubDirectory,
            ignore: [".*"]
          }
        ])
      //修改代碼開始  
      ].concat(utils.htmlPlugin())
      //修改代碼結(jié)束
    })
    
    if (config.build.productionGzip) {
      const CompressionWebpackPlugin = require("compression-webpack-plugin")
    
      webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
          asset: "[path].gz[query]",
          algorithm: "gzip",
          test: new RegExp(
            ".(" +
            config.build.productionGzipExtensions.join("|") +
            ")$"
          ),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    }
    
    if (config.build.bundleAnalyzerReport) {
      const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
      webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }
    
    module.exports = webpackConfig

多頁面的配置完成 cnpm run dev