vue-cli webpack模板项目搭建及打包时路径问题的解决方法

这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作，待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好。本人是一名后端开发人员，接触前端时间不长，这里有说的不好的地方，还请大家评论建议下。
1. 安装必要的环境准备
首先我们要能够暗转node.js,这个环境。百度搜索node，进入官网根据自己的操作系统进行下载即可。现在的版本都是自带npm的了。所以安装后，环境变量正常情况下会自动配置，开启一个命令行终端，输入node，npm，就可以看到相应的信息。那么说明安装成功。
2. cnpm
由于我们在国内，所以npm的下载路径对我们来说是很慢的，因此我们要使用淘宝提供的cnpm镜像（与maven镜像是一个效果。）百度搜索cnpm，点击进行官网，里面的教程很详细，这里也不会啰嗦了。
3. 正式搭建vue-cli
我们首先进行vue-cli的一个下载：
<div class="blockcode">
<pre class="brush:js;">
cnpm install -g vue-cli</pre>
</div>
里面会跟着将webpack一起下载下来，如果没有，那么我们也可以手动自己下载一下webpack就好了，命令相同，只是把vue-cli换成webpack。
下载好之后，进入一个合适的目录，然后输入： 

<code>vue-cli webpack vuedemo1</code> 

webpack参数是指：我们使用webpack的这套模板 

Vuedemo1指：我们在此目录下新建一个名字叫做vuedemo1的目录并将其作为项目的跟目录。
这样，一个空的vue-cli项目就搭建好了 

测试一下，输入： 

<code>npm run dev 
</code>
默认开启8080端口，并打开默认浏览器，看到一个熟悉的vue的页面。
4. 配置文件讲解
本身对配置文件理解的并不是特别深刻，这里将自己了解的一些配置含义写出来，共同学习一下。
bulid目录下面的webpack.base.config.js：这里一般是一些基础信息的配置，用过webpack的小伙伴应该都比较熟悉，这里简单讲解一下各个属性： 

input：代表入口文件，这里一般指定的是index.html 

output：出口文件。 

module：这里一般写的的针对各个文件的配置的解析loader。 

resolve：这里指其他配置，里面一般有：alias：起别名，例如： 

<div class="blockcode">
<pre class="brush:js;">
alias: {
‘vue$': ‘vue/dist/vue.esm.js',
‘@': resolve(‘src'),
‘RegForm': ‘@/components/RegForm.vue' //新增
}</pre>
</div>
我这里新增一个别名，代表一个路径，这样，以后要引入这个vue文件的时候，直接：
<code>import Regfrom from “RegForm</code>”就可以了。
前面加@，因为默认的配置中将@，取名为resolve（'src'）,解析了绝对路径。
build下面dev-server.js：
<div class="blockcode">
<pre class="brush:js;">
// 检查NodeJS和npm的版本
require('./check-versions')()
// 获取配置
var config = require('../config')
// 如果Node的环境变量中没有设置当前的环境（NODE_ENV），则使用config中的配置作为当前的环境
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
// 一个可以调用默认软件打开网址、图片、文件等内容的插件
// 这里用它来调用默认浏览器打开dev-server监听的端口，例如：localhost:8080
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
// 一个express中间件，用于将http请求代理到其他服务器
// 例：localhost:8080/api/xxx --> localhost:3000/api/xxx
// 这里使用该插件可以将前端开发中涉及到的请求代理到API服务器上，方便与服务器对接
var proxyMiddleware = require('http-proxy-middleware')
// 根据 Node 环境来引入相应的 webpack 配置
var webpackConfig = process.env.NODE_ENV === 'testing'
? require('./webpack.prod.conf')
: require('./webpack.dev.conf')
// dev-server 监听的端口，默认为config.dev.port设置的端口，即8080
var port = process.env.PORT || config.dev.port
// 用于判断是否要自动打开浏览器的布尔变量，当配置文件中没有设置自动打开浏览器的时候其值为 false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// 定义 HTTP 代理表，代理到 API 服务器
var proxyTable = config.dev.proxyTable
// 创建1个 express 实例
var app = express()
// 根据webpack配置文件创建Compiler对象
var compiler = webpack(webpackConfig)
// webpack-dev-middleware使用compiler对象来对相应的文件进行编译和绑定
// 编译绑定后将得到的产物存放在内存中而没有写进磁盘
// 将这个中间件交给express使用之后即可

vue-cli webpack模板项目搭建及打包时路径问题的解决方法

浏览过的版块