这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作，待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好。本人是一名后端开发人员，接触前端时间不长，这里有说的不好的地方，还请大家评论建议下。
1. 安装必要的环境准备
首先我们要能够暗转node.js,这个环境。百度搜索node，进入官网根据自己的操作系统进行下载即可。现在的版本都是自带npm的了。所以安装后，环境变量正常情况下会自动配置，开启一个命令行终端，输入node，npm，就可以看到相应的信息。那么说明安装成功。
2. cnpm
由于我们在国内，所以npm的下载路径对我们来说是很慢的，因此我们要使用淘宝提供的cnpm镜像（与maven镜像是一个效果。）百度搜索cnpm，点击进行官网，里面的教程很详细，这里也不会啰嗦了。
3. 正式搭建vue-cli
我们首先进行vue-cli的一个下载：
cnpm install -g vue-cli
里面会跟着将webpack一起下载下来，如果没有，那么我们也可以手动自己下载一下webpack就好了，命令相同，只是把vue-cli换成webpack。
下载好之后，进入一个合适的目录，然后输入：
vue-cli webpack vuedemo1
webpack参数是指：我们使用webpack的这套模板
Vuedemo1指：我们在此目录下新建一个名字叫做vuedemo1的目录并将其作为项目的跟目录。
这样，一个空的vue-cli项目就搭建好了
测试一下，输入：
npm run dev
默认开启8080端口，并打开默认浏览器，看到一个熟悉的vue的页面。
4. 配置文件讲解
本身对配置文件理解的并不是特别深刻，这里将自己了解的一些配置含义写出来，共同学习一下。
bulid目录下面的webpack.base.config.js：这里一般是一些基础信息的配置，用过webpack的小伙伴应该都比较熟悉，这里简单讲解一下各个属性：
input：代表入口文件，这里一般指定的是index.html
output：出口文件。
module：这里一般写的的针对各个文件的配置的解析loader。
resolve：这里指其他配置，里面一般有：alias：起别名，例如：
alias: {
‘vue$': ‘vue/dist/vue.esm.js',
‘@': resolve(‘src'),
‘RegForm': ‘@/components/RegForm.vue' //新增
}
我这里新增一个别名，代表一个路径，这样，以后要引入这个vue文件的时候，直接：
import Regfrom from “RegForm”就可以了。
前面加@，因为默认的配置中将@，取名为resolve（'src'）,解析了绝对路径。
build下面dev-server.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'
"htmlcode">
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
// 一个可以合并数组和对象的插件
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
// 一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 用于更友好地输出webpack的警告、错误等信息
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
// 合并基础的webpack配置
module.exports = merge(baseWebpackConfig, {
// 配置样式文件的处理规则，使用styleLoaders
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// 配置Source Maps。在开发中使用cheap-module-eval-source-map更快
devtool: '#cheap-module-eval-source-map',
// 配置webpack插件
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
// 后页面中的报错不会阻塞，但是会在编译结束后报错
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
4.build/build.js
// https://github.com/shelljs/shelljs
// 检查NodeJS和npm的版本
require('./check-versions')()
process.env.NODE_ENV = 'production'
// Elegant terminal spinner
var ora = require('ora')
var path = require('path')
// 用于在控制台输出带颜色字体的插件
var chalk = require('chalk')
// 执行Unix命令行的插件
var shell = require('shelljs')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...')
spinner.start() // 开启loading动画
// 输出文件的目标文件夹
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
// 递归删除旧的目标文件夹
shell.rm('-rf', assetsPath)
// 重新创建文件夹
shell.mkdir('-p', assetsPath)
shell.config.silent = true
// 将static文件夹复制到输出的目标文件夹
shell.cp('-R', 'static/*', assetsPath)
shell.config.silent = false
// webpack编译
webpack(webpackConfig, function (err, stats) {
spinner.stop() // 停止loading动画
if (err) throw err
// 没有出错则输出相关信息
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
5.build/webpack.prod.conf.js （npm run build用到的配置文件）
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 用于从webpack生成的bundle中提取文本到特定文件中的插件
// 可以抽取出css，js文件将其与webpack输出的bundle分离
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var env = process.env.NODE_ENV === 'testing'
"htmlcode">
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
// 构建产品时使用的配置
build: {
// webpack的编译环境
env: require('./prod.env'),
// 编译输入的index.html文件
index: path.resolve(__dirname, '../dist/index.html'),
// webpack输出的目标文件夹路径
assetsRoot: path.resolve(__dirname, '../dist'),
// webpack编译输出的二级文件夹
assetsSubDirectory: 'static',
// webpack编译输出的发布路径
assetsPublicPath: '/',
// 使用SourceMap
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
// 默认不打开开启gzip模式
productionGzip: false,
// gzip模式下需要压缩的文件的扩展名
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
// 开发过程中使用的配置
dev: {
// webpack的编译环境
env: require('./dev.env'),
// dev-server监听的端口
port: 8080,
// 启动dev-server之后自动打开浏览器
autoOpenBrowser: true,
// webpack编译输出的二级文件夹
assetsSubDirectory: 'static',
// webpack编译输出的发布路径
assetsPublicPath: '/',
// 请求代理表，在这里可以配置特定的请求代理到对应的API接口
// 例如将'/api/xxx'代理到'www.example.com/api/xxx'
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
// 是否开启 cssSourceMap
cssSourceMap: false
}
}
在使用npm run build进行webpack打包后，发布的项目可能会遇到图片等找不到的情况。
这里有一个万能解决办法：
1. 将config/index.js 里面的 assetsPublicPath:'/' 改为assetsPublicPath:'./'
2. build/util.js里面的
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'/'
})
将其中的publicPath改为：publicPath：'../../'就可以了。这样打包出来的路径就是正确的了。
第一个是为了改变js中引入图片的路径，改为./ 就是指在当前路径，这个.代表的路径就是assetsRoot+assetsSubDictionary，我这里定位到dist/static/ ，加上图片前缀img，就可以找到了。
第二种是为了改变vue文件中使用style样式里面例如background:url('xxx')，这样的路径，因为style最终变成css文件在dist/static/css里面，我们的图片放在dist/static/img中，那么加上../../变成dist目录下，默认的目录前缀是static，img是图片默认前缀，这样就可以定位到图片。
vue-cli构建的项目中请求代理与项目打包
vue-cli构建的项目中，生产模式下的打包路径、与生产模式下的请求代理简单示意
总结
以上所述是小编给大家介绍的vue-cli webpack模板项目搭建及打包时路径问题的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！