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

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>

vue项目实用方法

目录说明

vue.config.js

index.html

izengx

引用和评论

鉴权

手写一个动态海洋和天空效果的vue hooks

你可能不知道的图片加载相关知识

使用CSS给标题添加书名号并超出省略

原生electron起步-从零到一完成构建和打包

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

LRU算法，你别跑，我就要吃透你