vue安全问题及部署打包相关_vue env安全

vue安全问题
1使用csrf-token
2axios互传数据监听数据，并在axios跨域配置中判断origin
axios.get(’/user’, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
4跳转路径安全守卫设置

打包上线问题
1上线部署npm run build
前期准备
基础版
config/index.js中增加

build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
1
2
3
4
5
6
7
8
9
10
11

/
进阶版
1配置 resolve.modules
优化原理
（1）webpack 的 resolve.modules 是用来配置模块库（即 node_modules）所在的位置。当 js 里出现 import ‘vue’ 这样不是相对、也不是绝对路径的写法时，它便会到 node_modules 目录下去找。
（2）在默认配置下，webpack 会采用向上递归搜索的方式去寻找。但通常项目目录里只有一个 node_modules，且是在项目根目录。为了减少搜索范围，我们可以直接写明 node_modules 的全路径。
build/webpack.base.conf.js

...
module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
       resolve('node_modules') 
    ],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2配置装载机的 include & exclude
（1）webpack 的装载机（loaders）里的每个子项都可以有 include 和 exclude 属性：
include：导入的文件将由加载程序转换的路径或文件数组（把要处理的目录包括进来）
exclude：不能满足的条件（排除不处理的目录）
（2）我们可以使用 include 更精确地指定要处理的目录，这可以减少不必要的遍历，从而减少性能损失。
（3）同时使用 exclude 对于已经明确知道的，不需要处理的目录，予以排除，从而进一步提升性能。
build/webpack.base.conf.js 文件

...
module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig,
      include: [resolve('src')],
      exclude: /node_modules\/(?!(autotrack|dom-utils))|vendor\.dll\.js/
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src')],
      exclude: /node_modules/
    },
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

要配置切割我们需要一个插件CommonsChunksPlugin；
（1）默认情况下 webpack 使用 UglifyJS 插件进行代码压缩，但由于其采用单线程压缩，速度很慢。
（2）我们可以改用 webpack-parallel-uglify-plugin 插件，它可以并行运行 UglifyJS 插件，从而更加充分、合理的使用 CPU 资源，从而大大减少构建时间。

npm i webpack-parallel-uglify-plugin -D
1

build/webpack.prod.conf.js 文件
//仅含第三方插件
const ParallelUglifyPlugin = require(‘webpack-parallel-uglify-plugin’);

....
    // 删掉webpack提供的UglifyJS插件
    //new UglifyJsPlugin({
    //  uglifyOptions: {
    //    compress: {
    //      warnings: false
    //    }
    //  },
    //  sourceMap: config.build.productionSourceMap,
    //  parallel: true
    //}),
    // 增加 webpack-parallel-uglify-plugin来替换
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS:{
        output: {
          comments: false
        },
        compress: {
          warnings: false
        }
      }
    }),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

…

4使用 HappyPack 来加速代码构建
（1）由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情只能一件一件地做，不能多件事一起做。
（2）而 HappyPack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建。
npm i happypack os -D
打开 build/webpack.base.conf.js

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
        loader: 'happypack/loader?id=happyBabel',
        include: [resolve('src')],
        //排除node_modules 目录下的文件
        exclude: /node_modules/
      },
    ]
  },
  plugins: [
    new HappyPack({
        //用id来标识 happypack处理那里类文件
      id: 'happyBabel',
      //如何处理  用法和loader 的配置一样
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',
      }],
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      verbose: true,
    })
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32