目录阐明
|-- 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>