应用模块
1、 关于webpack -- setup
每次在开发webpack项目的时候 运行 npm run dev 其实是启动了一个服务器 服务器是node代码书写
这个服务器的运行的入口文件是 build/webpack.dev.conf.js
有关服务器的配置项是在 devServer 对象里面的 如下
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
},
setup(app) {
// 可以通过express的app 在setup里面写一些自己的中间间
// 这样写的话 项目中发送ajax请求地址是/some/path 就可以经过这里做一些处理
app.get('/some/path', function (req, res) {
let url = 'wwwwwwwwwww'
axios.get(url, {
headers: {
referer: '',
host: ''
}
params: req.query
}).then( (response) => {
res.json(response.data)
} )
});
})
}
}
编译模块
1、 让项目支持es6, es7的新语法
- babel-loader 转义es6新语法的， 但是它支持的不全， 还需要一些插件来支持新的api
- babel-polyfill 支持新的api， 需要全局引用
- babel-runtime / babel-plugin-transform-runtime 抽离了公共模块, 避免了重复引入
- .babelrc 对babel进行配置 可以局部使用 babel-polyfill（还不知道怎样个局部法）
- 测试了下， 好像不全局引用 babel-polyfill 也能使用 一些新的语法（后续待测）
{
// 配置样本
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "ie >= 8", "android >= 4.4"]
}
}],
"stage-2" // 不同的阶段
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
// 缺啥补啥
"@babel/preset-env": "^7.1.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
- stage 系列集合了一些对 es7 的草案支持的插件，由于是草案，所以作为插件的形式提供。
stage-0 - Strawman: just an idea, possible Babel plugin.
stage-1 - Proposal: this is worth working on.
stage-2 - Draft: initial spec.
stage-3 - Candidate: complete spec and initial browser implementations.
stage-4 - Finished: will be added to the next yearly release.
报错模块
[copy-webpack-plugin] unable to locate 'C:\Users\DELL\Desktop\vue-typescript\vue-typescript-starter\static' at 'C:\Users\DELL\Desktop\vue-typescript\vue-typescript-starter\static'
不能定位到某个文件夹 需要在项目中手动新建一个 static的文件夹
-
原因可能是因为static是一个空文件夹 克隆的时候或者上传的时候 git给过滤掉了
但是它又是必须的 所以需要手动创建出来
Error: listen EADDRINUSE 127.0.0.1:11001
端口被占用了 改端口吧
原因可能是重复打包 上一次打包服务还没完全退出导致的
Error in ./src/main.js no-new Do not use 'new' for side effects
- 如果用了 new Vue({}) new 关键字实例化一个对象 要赋值一个变量 否则报错
- 但是vue 的语法 又不需要去赋值 这是eslint报的错
// 下句代码是让eslint检测语法的时候 跳过new关键字的检测
/* eslint-disable no-new */
new Vue({
el: 'body',
components: {App}
})
Resource interpreted as script but transferred with MIME type text/plain.
- 描述
项目中 打包好的vue-typescript的文件， 放在tomcat上样式是对的，但是放到upjax上样式出错 并报了如上警告
tomcat服务器是根据自己请求的文件类型去返回给你的对应的文件类型的 而 upjax没那么智能， 如果后台的filter没有判断完全的话， 返回前台的类型是不对的
这个项目就是后台只判断了type/html， 导致css文件返回的类型也是type/html, 表现是浏览器中css样式失效
解决:后台把filter去掉或者就是把类型判全， 然后别忘了doFilter放行
node-sass -- XX/node_modules/node-sass: Command failed.
- 描述
在项目根目录下，直接yarn install 或者 npm intall 安装项目依赖的时候 ， 下载到node-sass 就开始报错， 安装进程随之停止
- 网上找了 好几种方法 都么解决问题
- 既然它一直报错， 索性就先不安它， 于是去package.json文件，找到此项依赖， 删除
- 然后 yarn install
- 没报错， 安装完成
- 然后将刚才删除的node-sass 项再恢复
- 再次yarn install 也没报错 项目还正常运行起来了
- 不知道怎么为什么， 反正将node-sass
单独安装就行了，很奇葩！！！