最近打算开发一个扩展（UI-DNA），打算用前端框架 vue.js ，同时使用 webpack 来实现 vue 的单文件化和一些文件复制操作。
在配置开发环境的时候遇到了一些问题，比如使用 webpack 来载入 vue 的时候，扩展的使用没有问题，但是远程调试时，调试界面会出现“Detached from the target（断开目标）”的错误，无法进行调试：
Detached from the target
Remote debugging has been terminated with reason: websocket_closed
"Detached from the target" 错误
这里就记录一下我在 CEP 中配置 vue.js + webpack 的方法。
package.json 依赖
要使用 webpack ，首先需要全局安装 webpack
npm install webpack -g
在项目中需要安装的有
- vue
- webpack 与它的各种载入器（ loader）
- babel（用来支持 ES6 语法，可选）
构建新项目的话，把下面依赖表中的项目加进 package.json （主要 vue 必须填到 dependencies 中）
然后在项目目录执行：
npm install
依赖表:
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.24.0",
"file-loader": "^0.9.0",
"node-sass": "^3.8.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.2",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.2"
},
"dependencies": {
"vue": "^1.0.26"
}
其中 babel-preset-stage-0、babel-plugin-transform-runtime 是为了支持在代码中使用 async/await 语法。
webpack.config.js 配置
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
main:['babel-polyfill','./index.js'],
},
output: {
path: './bin/JS',
filename: 'main.js'
},
target: 'web',
module:{
loaders:[
{test: /\.vue$/, loader: 'vue'},
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: ['es2015','stage-0']}},
{test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.sass$/, loaders: ["style", "css", "sass"]},
{test: /\.scss$/, loaders: ["style", "css", "scss"]},
{test: /\.(png|jpg|jpeg)$/, loader: 'url?limit=8000&name=../bin/img/[name].[ext]'},
]},
plugins: [ ],
devtool: 'eval-source-map',
vue: {
loaders: {
scss: 'style!css!sass',
js: 'babel'
}
}
};
避免无法调试的错误
直接在 webpack 中载入 vue 会导致调试时出现“Detached from the target（断开目标）”错误（ Photoshop CC2015.3），虽然并不影响扩展正常的使用，但是没法调试给开发带来了极大的麻烦。要避免这个问题，可以直接在 html 文件中引入 vue.js 文件而不是在 webpack 中载入：
示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
</head>
<body>
<!--页面内容：-->
<app title="DNA">
weqweqweqwe
</app>
<!--载入 JavaScript 文件-->
<script type="text/javascript" src="./JS/vue.js"></script><!--载入 vue.js 文件-->
<script type="text/javascript" src="./JS/vendor.bundle.js"></script>
<script type="text/javascript" src="./JS/main.js"></script>
</body>
</html>
这样就能正常使用 vue 了。
远程调试控制台
