一、 基礎環境
老調重彈，先安裝nodejs，再全域安裝vue-cli,webpack，相應的版本差異，自行調整，
另建議安裝一個開發工具，常規用Visual Studio Code
具體步驟，參考： https://blog.csdn.net/justflow/article/details/109273620
二、創建vue單頁面專案
vue-cli有兩種方式創建Vue專案，分別是
- vue create project-name
- vue init webpack project-name
考慮到后期改造需要用webpack的相關配置，所以這里直接就用第二種方式，用管理員權限打開cmd命令列模式，
> vue --version
@vue/cli 4.5.13
> webpack --version
webpack 5.47.1
webpack-cli 4.7.2
webpack-dev-server 3.11.2
> vue init webpack vue-multiple-pages
? Project name vue-multiple-pages
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset none
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "vue-multiple-pages".
# Installing project dependencies ...
# ========================
...........
.......
...........
added 1424 packages, and audited 1425 packages in 1m
56 packages are looking for funding
run `npm fund` for details
26 vulnerabilities (6 low, 16 moderate, 4 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
# Project initialization finished!
# ========================
To get started:
cd vue-multiple-pages
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack三、驗證Vue單頁面專案搭建成功
在命令中，依次執行專案創建后，給出的提示指令
> cd vue-multiple-pages
> npm run dev
》 vue-multiple-pages@1.0.0 dev
》 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
(node:6516) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
13% building modules 28/31 modules 3 active ...eSpace\vue-multiple-pages\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 4825ms 上午11:24:40
I Your application is running here: http://localhost:8081nodejs默認采用的埠為8080，但是由于我之前開啟這tomcat，導致8080埠已經被占用，nodejs就會自動追加為8081，根據提示，打開瀏覽器，輸入網址：http://localhost:8081
四、改造專案結構
下面是改造后的目錄結構，主要改造在src目錄下，這里需要注意幾點，一個webpack模版下，是不存在public目錄的，所以vue-cli默認的public下的static目錄和index.html檔案，就會在專案根目錄下，
以一個網站的公眾入口和管理端入口為目標，進行改造，參考下圖，相關操作如下：
- src目錄下新建pages目錄,并在pages目錄下，再新建home、admin兩個目錄
- 將src下的router、assets目錄，以及App.vue,main.js移動到src\pages\home目錄下，
- 將根目錄下的index.html，移動端src\pages\home目錄下
- 將src\pages\home目錄下的 index.html、main.js 更名為home.html、home.js
五、調整檔案配置
1. 修改 build\uitls.js 檔案內容，新增下列代碼
// glob是webpack安裝時依賴的一個第三方模塊，該模塊允許你使用 *等符號, 例如lib/*.js就是獲取lib檔案夾下的所有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
}2. 修改 build\webpack.base.config.js 的內容
將原先的入口檔案配置 entry: {app: './src/main.js'}, 改為 entry: utils.entries()，
................
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
},
............3. 修改 build\webpack.dev.config.js、build\webpack.prod.config.js 的內容
注釋掉new HtmlWebpackPlugin( ……) 的內容，在 plugins: [……] 后面追加 .concat(utils.htmlPlugin())
...............
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
.................
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())
.............
4. 修改 config\index.js 的內容
很多帖子，都說將該檔案中的 assetsPublicPath 屬性中的 ‘/’ 統一改為 ‘./’，這樣做的目的是為了打包出來的檔案，不需要修改參考路徑，
.................
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: './',
proxyTable: {},
...............
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
....................
}
}但經過我實際測驗，dev改了就會找不到路徑，build如何還不知道，等一下再補充
六、驗證結果
執行 npm run dev
> Executing task: npm run dev <
> vue-multiple-pages@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
(node:14508) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
13% building modules 30/33 modules 3 active ...e-pages\src\components\HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 5725ms
I Your application is running here: http://localhost:8008訪問 http://localhost:8008
訪問 http://localhost:8008/home.html
好像都不行，應該是路由沒有找到，百度了一圈后，config\index.js 配錯了 assetsPublicPath還是應該為 "/" ，
重新運行 npm run dev， 訪問 http://localhost:8008/home.html
這樣，一個頁面好了，
七、創建第二個頁面
準備第二個頁面admin的目錄結構，做一下操作
- 在src\pages下新建admin目錄，
- 把src\pages\home目中的所有檔案都復制一份到admin下，
- 把admin下的home.html, home.js 檔案更名為admin.html, admin.js
同時為了在頁面上區分home和admin，在兩個目錄下的App.vue檔案中，<template>標簽中分別新增<p>This Admin Page!</p> 和 <p>This Home Page!</p>
<template>
<div id="app">
<p>This Admin Page!</p>
<img src="./assets/logo.png" />
<router-view />
</div>
</template>重新運行 npm run dev， 訪問 http://localhost:8008/home.html
訪問： http://localhost:8008/admin.html
這樣，就代表多頁面配置成功，
八、打包后結果
運行 npm run build ,生成dist目錄
Hash: b07ca5dec7256abc4d39
Version: webpack 3.12.0
Time: 11355ms
Asset Size Chunks Chunk Names
static/js/home.176882345f44f82a47db.js 11.7 kB 0 [emitted] home
static/js/admin.7c28ab51b3bfe75e52e7.js 11.7 kB 1 [emitted] admin
static/js/vendor.0c135bbd52d710a676db.js 124 kB 2 [emitted] vendor
static/js/manifest.a8feca834d698fa66148.js 858 bytes 3 [emitted] manifest
static/css/admin.e7d41b95f96ae5ef7a6f7c821e2ce23e.css 434 bytes 1 [emitted] admin
static/css/home.be5ea3ac390cce154dc9aabcf9d8b294.css 433 bytes 0 [emitted] home
static/css/admin.e7d41b95f96ae5ef7a6f7c821e2ce23e.css.map 803 bytes [emitted]
static/css/home.be5ea3ac390cce154dc9aabcf9d8b294.css.map 801 bytes [emitted]
static/js/home.176882345f44f82a47db.js.map 22.5 kB 0 [emitted] home
static/js/admin.7c28ab51b3bfe75e52e7.js.map 22.5 kB 1 [emitted] admin
static/js/vendor.0c135bbd52d710a676db.js.map 627 kB 2 [emitted] vendor
static/js/manifest.a8feca834d698fa66148.js.map 4.97 kB 3 [emitted] manifest
admin.html 515 bytes [emitted]
home.html 512 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
將dist目錄copy到nginx的網站目錄下，訪問 http://localhost:8100/dist/home.html
訪問： http://localhost:8100/dist/admin.html
九、優化入口，分主次
考慮到公眾端的主頁一般默認入口都是index.html，我們將home全面都改為index
重新啟動 npm run dev ，訪問 http://localhost:8008/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/292317.html
標籤：其他
下一篇：基于SSM的手機商城