摘要:安裝環境安裝并添加入環境變量安裝淘寶鏡像安裝安裝腳手架創建項目模板進入到要放項目的文件夾安裝目錄結構調整配置文件修改添加依賴返回目錄中的所有子文件修改文件夾中的文件新增代碼頁面模板取得相應的頁面路徑,因為之前的配置,所
1.安裝環境
安裝node.js 并添加入環境變量PATH
安裝淘寶NPM鏡像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝webpack
npm install webpack -g
安裝vue-cli腳手架
npm install -g vue-cli
創建項目模板 vue init wepack vue-multipage-demo
cmd進入到要放項目的文件夾
安裝 cnpm install
2.目錄結構調整
3.配置文件修改
添加依賴 glob (返回目錄中的所有子文件)
npm install glob
修改build文件夾中的utils.js文件
//新增代碼 var glob = require("glob"); // 頁面模板 var HtmlWebpackPlugin = require("html-webpack-plugin"); // 取得相應的頁面路徑,因為之前的配置,所以是src文件夾下的pages文件夾 var PAGE_PATH = path.resolve(__dirname, "../src/pages"); // 用于做相應的merge處理 var merge = require("webpack-merge"); //多入口配置 // 通過glob模塊讀取pages文件夾下的所有對應文件夾下的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文件夾下的對應的html后綴文件,然后放入數組中 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", // 頁面模板需要加對應的js腳本,如果不加這行則每個頁面都會引入所有的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" // }, //注釋代碼結束 //新增代碼開始 entry: utils.entries(), //新增代碼結束 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 // }), //注釋代碼結束 // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, "../static"), to: config.dev.assetsSubDirectory, ignore: [".*"] } ]) //新增代碼開始 ].concat(utils.htmlPlugin()) //新增代碼結束 })
修改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" // }), //注釋代碼結束 // 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()) //修改代碼結束 }) 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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113324.html
摘要:如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好,此前看過很多專欄以及文章,此次實踐中還是遇到需要學習的部分。包括因為可能信息面不全,對插件源碼進行了詳細解讀,希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好,此前看過很多專欄以及文章,此次實踐中還是...
摘要:如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好,此前看過很多專欄以及文章,此次實踐中還是遇到需要學習的部分。包括因為可能信息面不全,對插件源碼進行了詳細解讀,希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好,此前看過很多專欄以及文章,此次實踐中還是...
摘要:多頁面應用就是幾個單頁面應用在一起。這篇文章使用的是總共有步我們從安裝好一個單頁面應用說起。在多頁面應用中,因為有多個應用模板,所以建議把應用模板放在一個文件夾里。例如創建每個單頁面應用的入口文件。如能用單頁面應用的,不使用多頁面應用。 vue+webpack多頁面應用 從git上初始化的vue項目框架是單頁面的。單頁面應用可以實現大部分頁面web應用開發。若要用到多頁面需要需要配置。...
摘要:多頁面跳轉之前看過有相關朋友了空的多頁面腳手架不過了幾個都是或者的剛好項目需要用到就在的基礎上進行了修改已經有直接用即可如果需要修改配置的請到里面修改并且全局引了如果不需要或者不喜歡請到里面修改多頁面空腳手架鏈接如果需要路由版的在的另外一 vue2.* (多頁面跳轉) @[vue2.3.3|webpack2.6.1|less|axios] 之前看過有相關朋友share了空的多頁面腳...
摘要:在谷歌找多頁面,實例還是比較少,功夫不負有心人,在那找到了,具體可以到這個,非常感謝童鞋,今天要講的內容是基于童鞋的多頁面實例上再優化的。有需要一起交流的可以加我的微信,,記得備注技術交流哈。 vue+webpack是否有多頁面 目前使用vue來做項目,估計大部分都是單頁面(SPA)應用,一個輕型的 MVVM 框架,誰用了MVVM框架,就再也回不去JQ時代了,哈哈。 在手機端的項目,使...
摘要:下載安裝,這里我使用安裝如果已經安裝之前版本或需要先卸載,再安裝新的版本。還給出了多頁面的配置選項,這比之前配置多頁面要方便的多。接下來需要在里面進行多頁面的配置。 1.下載安裝vue-cli3,這里我使用npm安裝 npm install -g @vue/cli 如果已經安裝之前版本(1.x或2.x)需要先卸載,再安裝新的版本。安裝完成后可以通過vue --version命令查看版本...
閱讀 2536·2023-04-25 19:47
閱讀 3383·2019-08-29 17:18
閱讀 856·2019-08-29 15:26
閱讀 3360·2019-08-29 14:17
閱讀 1115·2019-08-26 13:49
閱讀 3339·2019-08-26 13:22
閱讀 3023·2019-08-26 10:44
閱讀 2693·2019-08-23 16:51