webspa开发环境设置

一般情况下已经配置过的项目请勿重复修改，出现问题后查询下面文档修正局部即可，或运行yarn自动安装修正库。

 

## 开发环境配置

1、进入项目后，运行：yarn add vue vue-router element-ui whatwg-fetch query-string uglifyjs-webpack-plugin

2、修改webpack.config.js文件，为file-loader完善配置：test: /\.(png|jpg|gif|svg|woff|ttf|eot|woff2)$/,，重点将支持ttf\eot\woff\woff2四个字符库，以支持内部得一些图标特性。

3、启动开发：yarn run dev

 

## 异常修复&重构项目配置

1、重构项目，在项目外侧运行：yarn add vue-cli -g

2、重构项目：vue init webpack-simple server

3、进入项目：cd server

4、进行开发环境配置

5、在index.html的#id标签内，增加<router-view></router-view>代码，以支持内部路由结构。

 

## vscode调试

1、安装vue、debug for chrome、webpack插件

2、添加调试命令

{

    "type": "node",

    "request": "launch",

    "name": "Run dev",

    "program": "${workspaceFolder}",

    "sourceMaps": true,

    "preLaunchTask": "dev"

}

3、添加dev任务

"label": "dev",

// 合起来就是`npm run dev`

"type": "npm",

"script": "dev"

4、这样运行Run dev调试命令，即可调试。

5、如果失败，直接运行F5启动调试，或直接运行该任务即可。

6、另外一种方法是，直接运行dev-run.bat即可开始调试模式，但不支持vscode控制。

 

## build后出现js无法转化压缩的错误？

这是因为UglifyJSPlugin插件默认不支持ES6，有两个解决方法：

1、降低code级别到es5，但这几乎不可能；

2、使用yarn add UglifyJSPlugin安装插件，之后修改webpack.config.js：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

plugins{

    new UglifyJSPlugin({

        sourceMap: true

    }),

}

 

## 安装node-sass报错？

这是因为源无法获取，需修改为:

yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

之后再尝试安装即可。

 

## 图标扩展库fontawesome-vue

https://github.com/Justineo/vue-awesome/blob/master/README.zh_CN.md

yarn add vue-awesome

在main.js中引用即可。

import Vue from 'vue'

/* 在下面两种方式中任选一种 */

// 仅引入用到的图标以减小打包体积import 'vue-awesome/icons/flag'

// 或者在不关心打包体积时一次引入全部图标import 'vue-awesome/icons'

/* 任选一种注册组件的方式 */

import Icon from 'vue-awesome/components/Icon'

// 全局注册（在 `main .js` 文件中）Vue.component('v-icon', Icon)

// 或局部注册（在组件文件中）
export default {

    components: {

        'v-icon': Icon

    }

}