共计 3232 个字符，预计需要花费 9 分钟才能阅读完成。
目录阐明
|-- public
|-- src 我的项目开发目录
|-- api 接口目录
|-- request.js
|-- api.js 接口
|-- assets 动态文件
|-- image
|-- css
|-- _variables.scss 全局 sass 变量定义文件
|-- js
|-- config.js 全局 js 变量定义文件
|-- fieldParam.js 自定字段
|-- components 组件寄存目录
|-- i18n 国际化
|-- router router
|-- meta.js route 的配置文件
|-- store vuex
|-- utils 自定工具
|-- views 视图目录
|-- App.vue 主入口
|-- main.js 主入口
|-- package.json 依赖库
|-- package-lock.json 锁定安装包的具体版本号
|-- vue.config.js vue 配置文件
|-- .env 环境配置
|-- .env.test
|-- .env.production vue.config.js
let path = require('path');
let packageData = require('./package.json');
let CompressionPlugin = require('compression-webpack-plugin');
let timestamp = new Date().getTime();
let staticDeclare = ``;
let needPackage = !process.env.NODE_ENV.match('development');
function resolve(dir) {return path.join(__dirname, dir)
}
if (needPackage) {staticDeclare = `${process.env.VUE_APP_STATIC_URL}/${process.env.VUE_APP_PACKAGE_DIR}/`;
}
module.exports = {
publicPath: staticDeclare, // 动态资源加载的门路
outputDir: `${__dirname}/dist/${process.env.NODE_ENV}/${process.env.VUE_APP_CODE.toLowerCase()}`, // 打包的 dist 目录文件名
// indexPath: 'index.html', // 入口文件 index.html 的名字
// assetsDir: 'static', // img/fonts 等不会变内容的资源的文件夹
productionSourceMap: false,
chainWebpack: config => {
// 设置别名
config.resolve.alias
.set('@', resolve('src'))
},
devServer: {
disableHostCheck: true, // 非 localhost 拜访时，绕过主机查看
host: 'dev.hostname.com',
open: true, // 关上浏览器窗口
proxy: {
'/api/service': {
target: 'http://test.hostname.com:9000', // 本地跨域拜访测试环境接口
changeOrigin: true, // 是否跨域
pathRewrite: {'/api/service': '',}
},
}
},
// 定义 scss 全局变量
css: {
loaderOptions: {
sass: {prependData: `@import "@/assets/css/_variables.scss";`},
},
extract: {// ${staticDeclare}css/
filename: `css/[name]_${packageData.version}_${timestamp}.css`,
chunkFilename: `css/[name]_${packageData.version}_${timestamp}.css`
},
},
configureWebpack: () => {
// 打包时压缩成 gzip 格局
if (needPackage) {
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240,
deleteOriginalAssets: false
})],
output: {filename: `js/[name]_${packageData.version}_${timestamp}.js`,
chunkFilename: `js/[name]_${packageData.version}_${timestamp}.js`
},
// 此配置须要 index.html 文件配合减少引入内部框架，以减小打包的大小
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios',
'element-ui': 'ELEMENT'
},
// externals 中的 key 是用于 import，value 示意的在全局中拜访到该对象，就是 window.echarts
}
}
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>declare</title>
</head>
<body>
<noscript>
<strong>We're sorry but declare doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
<strong> 很道歉，如果未启用 JavaScript，则网站无奈失常工作。请启用它以持续浏览。</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<% if (!process.env.NODE_ENV.match('development')) { %>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/index.js"></script>
<% } %>
</body>
</html>
正文完
