項目準備

1. 配置 alias 別名

使用vue-cli開發項目，最大特色是組件化。組件中頻繁引用其他組件或插件。我們可以把一些常用的路徑定義成簡短的名字。方便開發中使用。

//加載path模塊 const path = require('path') //定義resolve方法，把相對路徑轉換成絕對路徑 const resolve = dir => path.join(__dirname, dir)module.exports = {chainWebpack: config => {// 添加別名config.resolve.alias.set('@', resolve('src')).set('assets', resolve('src/assets')).set('api', resolve('src/api')).set('views', resolve('src/views')).set('components', resolve('src/components'))} }

注意：對于圖片我們要在路徑前面加~

<img src="~@/assets/img/logo.png" alt="">

2. 項目結束后打包前webpack配置

module.exports = {// 靜態資源路徑（默認/，打包后會白屏）publicPath: './', //去除生產環境的productionSourceMapproductionSourceMap: false, }

3. 生成打包報告

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build --report"}

之后你運行npm run build就會出現一個report.html,運行到瀏覽器后可以清除的看見文件的體積大小

打包

1. 去除console.log()輸出打印

下載插件 cnpm i babel-plugin-transform-remove-console -D babel.config.js文件 //項目發布階段需要用到的babel插件 const productPlugins = []//判斷是開發還是發布階段 if(process.env.NODE_ENV === 'production'){//發布階段productPlugins.push("transform-remove-console") }module.exports = {"presets": ['@vue/cli-plugin-babel/preset'],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}],...productPlugins] }

2. 使用cdn

在項目中我是創建了兩個入口文件main-dev.js(開發入口文件)和main-prod.js(生產入口文件)

vue.config.js module.exports = {chainWebpack:config=>{//發布模式config.when(process.env.NODE_ENV === 'production',config=>{//entry找到默認的打包入口，調用clear則是刪除默認的打包入口//add添加新的打包入口config.entry('app').clear().add('./src/main-prod.js')//使用externals設置排除項config.set('externals',{vue:'Vue','vue-router':'VueRouter',axios:'axios',lodash:'_',echarts:'echarts',nprogress:'NProgress','vue-quill-editor':'VueQuillEditor'})})//開發模式config.when(process.env.NODE_ENV === 'development',config=>{config.entry('app').clear().add('./src/main-dev.js')})} }

打開開發入口文件main-prod.js,刪除掉默認的引入代碼

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' // 引入element-ui // import ElementUI from 'element-ui'; // import 'element-ui/lib/theme-chalk/index.css'; // 重置樣式 import '@/assets/reset.css' import '@/assets/common.css'// 全局注冊樹形表格 import TreeTable from 'vue-table-with-tree-grid' // 導入富文本編輯器 import VueQuillEditor from 'vue-quill-editor' // 導入富文本編輯器樣式 // import 'quill/dist/quill.core.css' // import 'quill/dist/quill.snow.css' // import 'quill/dist/quill.bubble.css'//導入進度條樣式 // import 'nprogress/nprogress.css'Vue.config.productionTip = false // Vue.use(ElementUI);// 全局注冊富文本編輯器 Vue.use(VueQuillEditor) // 全局注冊表格樹 Vue.component('tree-table',TreeTable)// 全局時間過濾器 Vue.filter('formTime',(val)=>{let t = new Date(val)let y = t.getFullYear()let m = t.getMonth() + 1let d = t.getDate()let h = t.getHours()let f = t.getMinutes()let s = t.getSeconds()// 定義一個添0函數function addZero(val) {return val > 10 ? val : '0' + val}return `${addZero(y)}-${addZero(m)}-${addZero(d)} ${addZero(h)}:${addZero(f)}:${addZero(s)}` })new Vue({router,store,render: h => h(App) }).$mount('#app')

然后打開public/index.html添加外部cdn引入代碼

<!-- nprogress 的樣式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /><!-- 富文本編輯器 的樣式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" /><link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" /><link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" /><!-- element-ui 的樣式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.6/theme-chalk/index.css" /><script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script><script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script><script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script><script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script><!-- 富文本編輯器的 js 文件 --><script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script><!-- element-ui 的 js 文件 --><script src="https://cdn.staticfile.org/element-ui/2.15.6/index.js"></script>

當我們開發環境的時候是不需要cdn加載的，使用插件判斷是否為發布環境并定制首頁內容

module.exports = {chainWebpack:config=>{config.when(process.env.NODE_ENV === 'production',config=>{......//使用插件config.plugin('html').tap(args=>{//添加參數isProdargs[0].isProd = truereturn args})})config.when(process.env.NODE_ENV === 'development',config=>{config.entry('app').clear().add('./src/main-dev.js')//使用插件config.plugin('html').tap(args=>{//添加參數isProdargs[0].isProd = falsereturn args})})} }

然后在public/index.html中判斷

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>電商后臺管理系統</title><% if(htmlWebpackPlugin.options.isProd){ %><!-- nprogress 的樣式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />........<!-- element-ui 的 js 文件 --><script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script><% } %></head>.......

項目上線

1. 通過node創建服務器
在src文件下創建一個server文件，在終端server文件中打開輸入：

npm init -y 會生成一個package.json

初始化包之后，輸入

npm i express -S

之后將打包生成的dist文件夾放置到server文件下，再創建一個app.js

app.js文件 const express = require('express')const app = express()app.use(express.static('./dist'))app.listen(8998,()=>{console.log("server running at http://127.0.0.1:8998") })

在終端中輸入node app.js啟動服務器，輸入服務器的地址(http://127.0.0.1:8998)就可以訪問到你的項目了。

2. 使用pm2管理應用

啟動服務器后我們關閉黑窗口后服務器就會停止，如果不想一直打開黑窗口可以使用pm2進行管理。
打開server文件夾，打開終端輸入：

npm i pm2 -g 使用pm2啟動項目，在終端中輸入命令：pm2 start app.js --name 自定義名稱 查看項目列表命令：pm2 ls 重啟項目：pm2 restart 自定義名稱 停止項目：pm2 stop 自定義名稱 刪除項目：pm2 delete自定義名稱

打包中遇見的問題

vue 項目上線打包后 出現 Error:if there‘s nested data,rowKey is required

解決辦法：
package.json 里面的element-ui的版本，必須要跟public/index.html中的CDN引入的版本保持一致

總結

以上是生活随笔為你收集整理的vue后台管理系统打包上线到node的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。