vue安全问题及部署打包相关
vue安全问题
1使⽤csrf-token
2axios互传数据监听数据，并在axios跨域配置中判断origin
<(’/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('./v'),
index: solve(__dirname, '../dist/index.html'),
assetsRoot: solve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: v.npm_config_report
}
/
进阶版
1配置 dules
优化原理
（1）webpack 的 dules 是⽤来配置模块库（即 node_modules）所在的位置。当 js ⾥出现 import ‘vue’ 这样不是相对、也不是绝对路径的写法时，它便会到 node_modules ⽬录下去。
（2）在默认配置下，webpack 会采⽤向上递归搜索的⽅式去寻。但通常项⽬⽬录⾥只有⼀个 node_modules，且是在项⽬根⽬录。为了减少搜索范围，我们可以直接写明 node_modules 的全路径。
build/f.js
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
...
2配置装载机的 include & exclude
（1）webpack 的装载机（loaders）⾥的每个⼦项都可以有 include 和 exclude 属性：
include：导⼊的⽂件将由加载程序转换的路径或⽂件数组（把要处理的⽬录包括进来）
include和containexclude：不能满⾜的条件（排除不处理的⽬录）
（2）我们可以使⽤ include 更精确地指定要处理的⽬录，这可以减少不必要的遍历，从⽽减少性能损失。
（3）同时使⽤ exclude 对于已经明确知道的，不需要处理的⽬录，予以排除，从⽽进⼀步提升性能。
build/f.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/
},
.
..
要配置切割我们需要⼀个插件CommonsChunksPlugin；
（1）默认情况下 webpack 使⽤ UglifyJS 插件进⾏代码压缩，但由于其采⽤单线程压缩，速度很慢。
（2）我们可以改⽤ webpack-parallel-uglify-plugin 插件，它可以并⾏运⾏ UglifyJS 插件，从⽽更加充分、合理的使⽤ CPU 资源，从⽽⼤⼤减少构建时间。
npm i webpack-parallel-uglify-plugin -D
build/f.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
}
}
}),
…
4使⽤ HappyPack 来加速代码构建
（1）由于运⾏在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情只能⼀
件⼀件地做，不能多件事⼀起做。（2）⽽ HappyPack 的处理思路是：将原有的 webpack 对 loader 的执⾏过程，从单⼀进程的形式扩展多进程模式，从⽽加速代码构建。
npm i happypack os -D
打开 build/f.js
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
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,
})
]
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。