关于vue.js:vue项目实用方法

|-- 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

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
            }
        } 
    }
}

<!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>

目录阐明

vue.config.js

index.html