Vue 项目上线优化

如果需要自己写的项目上线的，需要我们对项目进行优化！

1、文件路径修改

打包项目的时候，没有对路径做出处理的话，出来的路径是从根目录开始的，会导致我们使用本地服务器测试的时候找不到所需文件，所以需要我们对路径进行处理：

在 vue.config.js 里面配置：

module.exports = {
    publicPath: './'
}

// 这个做处理后原来路径以根路径开始的，就会更改为以当前文件进行

//  这样就可以找到我们所需的文件

2、map文件的删除

map 文件是打包后带的，我们可以进行精准的定位文件出的错误，不过我们一般不需要这个map文件，可以在打包之前就可以让map文件不进行打包：

在 vue.config.js 里面配置：

module.exports = {
    productionSourceMap: false
}


// 设置完之后打包，就不会在有map文件

3、接口处理

如果我们在的基地址是本地服务器的话，我们打包后就没有效果了，所以我们要对接口进行处理，我们可以在项目的根目录下创建两个文件，用来判断我们的环境：

.env.development 文件里配置开发环境的基地址：

NODE_ENV=development
VUE_APP_API='本地服务器基地址'

.env.production 文件里配置生产环境的基地址：

NODE_ENV=production
VUE_APP_API='生产环境的基地址'

配置完后就可以在我们封装的axios的文件里面将 baseURL 进行修改，使用 node 的方法，根据不同的环境会配置不同的基地址：

const api = axios.create({
    baseURL: process.env.VUE_APP_API,
    timeout: 5000
})

4、抽离项目配置文件

如果不抽离一些大的配置文件 （比如：element ui ，echart 等），打包的时候，打包后的文件也较大，所以我们需要抽离这些配置文件：

在 vue.config.js 里面配置：

module.exports = {
    chainWebpack: config => {
        // node 的方法判断当前环境是生产环境的话，我们就对配置文件进行抽离
        config.when(process.env.NODE_ENV === 'production', config => {
            // 指定生产环境的mian.js 的文件
            config.entry('app').clear().add('./src/main-prod.js')
            // externals 里面配置需要抽离的配置文件
            config.set('externals', {
                'vue': 'Vue',
                'echarts': 'echarts',
                'element-ui': 'ELEMENT',
                'vue-quill-editor': 'VueQuillEditor'
            })
            config.plugin('html').tap(args => {
                return args
            })
        })
        // 也可以不对开发环境进行处理
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main.js')
            config.plugin('html').tap(args => {
                return args
            })
        })
    },
}

// 注意事项就是我们抽离的时候，键值对是个mian.js里面的是相反的，
// 还有注意的是如element ui ,这个因为CDN的js文件导出的是ELEMENT 所以这个我们需要更改

抽离后，我们就需要在项目根目录下的 pulic 里面的index.html将我们抽离配置文件，用对应官方给的CDN 进行引入样式，引入组件库，不然我们打包后，抽离的配置文件因为没有对应的样式和一些组件库，我们测试就出不来效果，可能还会报错，

5、路由注意事项

我们需要使用哈希路由或者默认路由，不能是用history路由，不然会出一些问题，比如点击路由跳转没有效果，而且还会报错，还有可能直接白屏

6、删除 console.log 控制台打印

我们要下载一个插件用来删除 console，

cnpm i  babel-plugin-transform-remove-console -D

然后再项目根目录下 babel.config.js 文件中配置：

const prodPlugins = [];
if (process.env.NODE_ENV === 'production') {
    prodPlugins.push('transform-remove-console');
}

module.exports = {
    presets: [
        // 这个如果用不了就使用  '@vue/app'
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        ...prodPlugins
    ]
}

配置完后，打包的项目中就没有console了