1.在根目录下创建vue.config.js
在vue.config.js中进行需要的配置
修改静态资源路径,不修改则会出现白屏的情况
module.exports = {
publicPath:"./",
}
2.在package.json中的scripts下将build修改成
"build":"vue-cli-service build --report"
在服务器环境运行dist通过在vscode中下载插件(Live Server),找到dist文件夹下面的index.html看运行效果!
3.进度条
(1).下载nprogress npm i --save nprogress
(2).在main.js中导入
import Nprogress from 'nprogress'//js
import 'nprogress/nprogress.css'//css
下载完成后在封装axios请求的js文件中进行开启和关闭
import axios from 'axios'
//根据环境不同引入不同api地址
import { baseUrl } from '@/config'
// 进度条
import Nprogress from 'nprogress'
import store from '@/store'
// 设置axios/baseUrl的超时时间
let service = axios.create({
baseURL: baseUrl, // url = base api url + request url
timeout: 60000 // request timeout
})
// 请求拦截(设置请求头)
service.interceptors.request.use(config => {
Nprogress.start() //开启进度条
if (store.state.token) {
config.headers['Authorization'] = store.state.token
}
return config
}, error => {
console.log(error)
return Promise.reject(error)
})
// 响应拦截器(设置登录超时)
service.interceptors.response.use(res => {
Nprogress.done() //响应完成后关闭
return Promise.resolve(res || 'error')
}, error => {
console.log('err' + error)
return Promise.reject(error)
})
export default service
4.去除生产环境SouceMap (这个js文件是占很大空间)
productionSourceMap: false, //2.去除生产环境的productionSourceMap
5.去除注释
安装 babel-plugin-transform-remove-console --save-dev
安装完成后会自动生成babel.config.js
//项目发布阶段需要用到的babel插件
const productPlugins = []
//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
//发布阶段
productPlugins.push("transform-remove-console")
}
module.exports = {
"plugins": [
...productPlugins
]
}
6.将main.js进行拆分
把main.js拆分成 main-prod.js 和 main-dev.js 里面分别复制一份
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 树状表格
import ZkTable from 'vue-table-with-tree-grid'
// 段点隐藏
import 'element-ui/lib/theme-chalk/display.css';
// element.js
import '@/plugins/element.js'
// 移动端适配
import 'lib-flexible/flexible';
// 阿里图标
import './assets/fonts/iconfont.css'
//2.main中 echarts
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts
import axios from "axios"
Vue.config.productionTip = false
Vue.prototype.$axios = axios
//过滤时间
Vue.filter("Format",(val)=>{
let date=new Date(val)
let y =date.getFullYear()
let m =(date.getMonth()+1+'').padStart(2,'0')
let d =(date.getDate()+'').padStart(2,'0')
let h = (date.getHours()+'').padStart(2,'0')
let f = (date.getMinutes()+'').padStart(2,'0')
let s= (date.getSeconds()+'').padStart(2,'0')
return `${y}-${m}-${d} ${h}:${f}:${s}`
})
Vue.component('zk-table', ZkTable)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
然后再vue.config.js中的chainWebpack进行配置
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',
'element-ui': 'ElementUI',
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')
})
}
7.使用CDN加载外部样式
首先在chainWebpack中的发布模式中设置排除项 和 动态处理router
chainWebpack:config=>{// 3. 自定义打包入口
//发布模式
config.when(process.env.NODE_ENV === 'production',config=>{
//entry找到默认的打包入口,调用clear则是删除默认的打包入口
//add添加新的打包入口
config.entry('app').clear().add('./src/main-prod.js')
// 2.使用externals设置排除项 (2.加载外部CDN)
config.set('externals',{
vue:'Vue',
'vue-router':'VueRouter',
axios:'axios',
lodash:'_',
echarts:'echarts',
nprogress:'NProgress',
'vue-quill-editor':'VueQuillEditor'
})
//## 处理$router. 发布模式引入cdn资源
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
//开发模式
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear().add('./src/main-dev.js')
//## 处理$router 开发模式不引入cdn资源
config.plugin('html').tap(args => {
args[0].isProd = false
return args
})
})
}
其次,去main-prod.js中注释 进度条、element-ui的css包
// import 'element-ui/lib/theme-chalk/display.css';
//import 'nprogress/nprogress.css'
在public夹文件中的index.html的<head></head>头部中引入
<script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<!-- nprogress 的样式表文件 -->
<!-- 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.2/theme-chalk/index.css" />
<!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> -->
<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.2/index.js"></script>
打包下来的main-prod.js文件中的完整代码
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//环境配置
import { baseUrl } from '@/config/index.js'
console.log(baseUrl);
//导入axios
// import axios from '@/utils/service.js'
// Vue.prototype.$axios = axios; // 把axios挂载到Vue的原型上,这样的话项目中任何一个组件都可以使用了
// 移动端适配
import 'lib-flexible/flexible';
//引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts=echarts
//引入font
import '../src/assets/fonts/iconfont.css'
//引入
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
//引入 tree-table
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
//过滤器
Vue.filter('dataFormat', function (originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
// yyyy-mm-dd hh:mm:ss
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
8.实现首页优化
在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>
.......
在vue.config.js中
module.exports = {
chainWebpack:config=>{
config.when(process.env.NODE_ENV === 'production',config=>{
......
//使用插件
config.plugin('html').tap(args=>{
//添加参数isProd
args[0].isProd = true
return args
})
})
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear().add('./src/main-dev.js')
//使用插件
config.plugin('html').tap(args=>{
//添加参数isProd
args[0].isProd = false
return args
})
})
}
}