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

    
    
    
    
    
    
    



    
    

    
    <% if (!process.env.NODE_ENV.match('development')) { %>
    
    
    
    
    
    <% } %>