提交 d01a7338 authored 作者: 龙菲's avatar 龙菲

修复注册animated带来的问题;优化构建打包的速度和体积

上级 5c6fa038
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -9,7 +9,6 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@xunlei/vue-lazy-component": "^1.1.3",
"animate.css": "^4.1.1",
"animejs": "^3.2.1",
"axios": "^0.27.2",
......@@ -24,6 +23,7 @@
"qrcodejs2": "^0.0.2",
"sass-loader": "^13.0.2",
"svgo": "^2.8.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vue-slidepage": "^1.0.0",
......
......@@ -5,16 +5,19 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
<% } %>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- 使用CDN的CSS文件 -->
<!-- <% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %> -->
</head>
<body>
......@@ -23,12 +26,6 @@
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 使用CDN的JS文件 -->
<!-- <% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %> -->
<script type="text/javascript" src="./static/js/wow.js"></script>
<script type="text/javascript">
new WOW().init()
......
import Vue from 'vue'
import App from './App.vue'
import router from './router'
......@@ -9,7 +10,7 @@ import "@/assets/styles/index.scss"; //全局样式
import './icons'
import animated from 'animate.css';
import animated from 'animate.css'; //不用进行Vue.use(animated)
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
......@@ -30,7 +31,7 @@ import '@/rem'
Vue.config.productionTip = false
Vue.use(ElementUI);
// 全局注册动画效果
Vue.use(animated);
// Vue.use(animated);
// 全局注册修改图片链接方法
Vue.prototype.$getFullUrl = getFullUrl
......
const {
defineConfig
} = require('@vue/cli-service')
const path = require('path')
const { defineConfig } = require("@vue/cli-service");
const path = require("path");
const isProduction = process.env.NODE_ENV === "production";
const cdn = {
css: [],
js: [
"https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js",
"https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js",
"https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js",
"https://cdn.bootcss.com/axios/0.18.0/axios.min.js",
],
};
function resolve(dir) {
return path.join(__dirname, dir)
return path.join(__dirname, dir);
}
// //生产环境标记
// const IS_PRODUCTION = process.env.NODE_ENV === 'production'
// //配置引用cdn的js、css地址
// const cdn = {
// css: [
// 'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css'
// ],
// js: [
// 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
// 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.2/vue-router.min.js',
// 'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js',
// 'https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js',
// 'https://unpkg.com/element-ui@2.13.2/lib/index.js',
// 'https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js'
// ]
// }
// //配置打包时使用CDN节点(加入externals外部扩展), 忽略打包的第三方库
// //左面放package.json中的扩展的名称,右面放项目依赖的名称(项目初始化要用的名称)
// const externals = {
// // 属性名称 vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的,不去 node_modules 中找,而是去找全局变量 Vue(其他的为VueRouter、Vuex、axios、ELEMENT、echarts,注意全局变量是一个确定的值,不能修改为其他值,修改为其他大小写或者其他值会报错,若有异议可留言)
// vue: 'Vue',
// 'vue-router': 'VueRouter',
// vuex: 'Vuex',
// axios: 'axios',
// 'element-ui': 'ELEMENT',
// 'echarts': 'echarts'
// }
module.exports = defineConfig({
publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
publicPath: "./",
outputDir: "dist",
assetsDir: "static",
transpileDependencies: true,
lintOnSave: false, //关闭eslint检查
devServer: {
host: 'localhost',
port: '8080',
open: true,
host: "localhost",
port: "8080",
open: true,// 自动开启浏览器
hot: true,
compress: false, // 开启压缩
proxy: {
'/api': {
// target: 'http://192.168.1.230:9562/api',//测试内网
// target: 'http://222.85.214.245:9602/api',//测试外网
// target: 'http://114.115.157.218:9602/api',//生产
target:'https://www.gzswbsy.com/api',
"/api": {
target: "https://www.gzswbsy.com/api",
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
"^/api": "",
},
},
'/files': {
// target:'http://192.168.1.230:9563/files',//测试内网
// target: 'http://222.85.214.245:9604/files',//测试外网
// target: 'http://114.115.157.218:9602/files',//生产
target:'https://www.gzswbsy.com/files',
"/files": {
target: "https://www.gzswbsy.com/files",
changeOrigin: true,
pathRewrite: {
'^/files': ''
}
}
}
"^/files": "",
},
},
},
},
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
loaderOptions: {
sass: {
additionalData: `@import "@/assets/styles/variable.scss";` //引入全局变量
}
additionalData: `@import "@/assets/styles/variable.scss";`, //引入全局变量
},
},
},
configureWebpack: (config) => {
if (isProduction) {
// 用cdn方式引入
config.externals = {
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
axios: "axios",
};
// 为生产环境修改配置...
config.plugins.push(
//生产环境自动删除console
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
);
}
},
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = '贵州博物馆精品展览展示平台'
return args
})
chainWebpack: (config) => {
// 删除预加载
config.plugins.delete("preload");
config.plugins.delete("prefetch");
// 压缩代码
config.optimization.minimize(true);
// 分割代码
config.optimization.splitChunks({
chunks: 'all'
})
config.plugin("html").tap((args) => {
args[0].cdn = cdn;
args[0].title = "贵州博物馆精品展览展示平台";
return args;
});
// svg
config.module.rule("svg").exclude.add(resolve("src/icons")).end();
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.rule("icons")
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.include.add(resolve("src/icons"))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: 'icon-[name]'
symbolId: "icon-[name]",
})
.end()
// 提升构建速度近50%
config.cache(true)
},
.end();
config.cache(true);
})
},
});
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论