Skip to content

E
exhibition_page
提交 d01a7338 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

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

上级 5c6fa038
隐藏空白字符变更
内嵌 并排
正在显示 包含 101 行增加 和 94 行删除
package-lock.json deleted 100644 → 0
浏览文件 @ 5c6fa038
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
浏览文件 @ d01a7338
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@xunlei/vue-lazy-component": "^1.1.3",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"animejs": "^3.2.1", "animejs": "^3.2.1",
"axios": "^0.27.2", "axios": "^0.27.2",
...@@ -24,6 +23,7 @@ ...@@ -24,6 +23,7 @@
"qrcodejs2": "^0.0.2", "qrcodejs2": "^0.0.2",
"sass-loader": "^13.0.2", "sass-loader": "^13.0.2",
"svgo": "^2.8.0", "svgo": "^2.8.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue-slidepage": "^1.0.0", "vue-slidepage": "^1.0.0",
......
public/index.html
浏览文件 @ d01a7338
...@@ -5,16 +5,19 @@ ...@@ -5,16 +5,19 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title> <title>
<%= htmlWebpackPlugin.options.title %> <%= htmlWebpackPlugin.options.title %>
</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> </head>
<body> <body>
...@@ -23,12 +26,6 @@ ...@@ -23,12 +26,6 @@
Please enable it to continue.</strong> Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <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" src="./static/js/wow.js"></script>
<script type="text/javascript"> <script type="text/javascript">
new WOW().init() new WOW().init()
......
src/main.js
浏览文件 @ d01a7338
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
...@@ -9,7 +10,7 @@ import "@/assets/styles/index.scss"; //全局样式 ...@@ -9,7 +10,7 @@ import "@/assets/styles/index.scss"; //全局样式
import './icons' import './icons'
import animated from 'animate.css'; import animated from 'animate.css'; //不用进行Vue.use(animated)
import VideoPlayer from 'vue-video-player' import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css' import 'video.js/dist/video-js.css'
...@@ -30,7 +31,7 @@ import '@/rem' ...@@ -30,7 +31,7 @@ import '@/rem'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI); Vue.use(ElementUI);
// 全局注册动画效果 // 全局注册动画效果
Vue.use(animated); // Vue.use(animated);
// 全局注册修改图片链接方法 // 全局注册修改图片链接方法
Vue.prototype.$getFullUrl = getFullUrl Vue.prototype.$getFullUrl = getFullUrl
......
vue.config.js
浏览文件 @ d01a7338
const { const { defineConfig } = require("@vue/cli-service");
defineConfig const path = require("path");
} = require('@vue/cli-service') const isProduction = process.env.NODE_ENV === "production";
const path = require('path') 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) { 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({ module.exports = defineConfig({
publicPath: './', publicPath: "./",
outputDir: 'dist', outputDir: "dist",
assetsDir: 'static', assetsDir: "static",
transpileDependencies: true, transpileDependencies: true,
lintOnSave: false, //关闭eslint检查 lintOnSave: false, //关闭eslint检查
devServer: { devServer: {
host: 'localhost', host: "localhost",
port: '8080', port: "8080",
open: true, open: true,// 自动开启浏览器
hot: true, hot: true,
compress: false, // 开启压缩
proxy: { proxy: {
'/api': { "/api": {
// target: 'http://192.168.1.230:9562/api',//测试内网 target: "https://www.gzswbsy.com/api",
// target: 'http://222.85.214.245:9602/api',//测试外网
// target: 'http://114.115.157.218:9602/api',//生产
target:'https://www.gzswbsy.com/api',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/api': '' "^/api": "",
} },
}, },
'/files': { "/files": {
// target:'http://192.168.1.230:9563/files',//测试内网 target: "https://www.gzswbsy.com/files",
// target: 'http://222.85.214.245:9604/files',//测试外网
// target: 'http://114.115.157.218:9602/files',//生产
target:'https://www.gzswbsy.com/files',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/files': '' "^/files": "",
} },
} },
} },
}, },
css: { css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
loaderOptions: { loaderOptions: {
sass: { 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 => { chainWebpack: (config) => {
config // 删除预加载
.plugin('html') config.plugins.delete("preload");
.tap(args => { config.plugins.delete("prefetch");
args[0].title = '贵州博物馆精品展览展示平台' // 压缩代码
return args config.optimization.minimize(true);
}) // 分割代码
config.optimization.splitChunks({
chunks: 'all'
})
config.plugin("html").tap((args) => {
args[0].cdn = cdn;
args[0].title = "贵州博物馆精品展览展示平台";
return args;
});
// svg // svg
config.module.rule("svg").exclude.add(resolve("src/icons")).end();
config.module config.module
.rule('svg') .rule("icons")
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/) .test(/\.svg$/)
.include.add(resolve('src/icons')) .include.add(resolve("src/icons"))
.end() .end()
.use('svg-sprite-loader') .use("svg-sprite-loader")
.loader('svg-sprite-loader') .loader("svg-sprite-loader")
.options({ .options({
symbolId: 'icon-[name]' symbolId: "icon-[name]",
}) })
.end() .end();
// 提升构建速度近50% config.cache(true);
config.cache(true)
},
}) },
});
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论