也可以通过npm run build 打包项目文件进行线上部署.
scripts.build命令解读：
通过node命令构建build文件夹下的build.js。
命令的配置可以根据自己脚手架的配置文件位置和名称不同修改哦！
五.构建脚手架目录
同学们可以通过自己的习惯和喜爱搭建自己的脚手架目录,下面讲解以上面脚手架结构为准！
六.构建config/config.js
6.1 该文件主要用来配置构建开发环境和生产环境差异化的参数.
6.2
const _path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//vue-loader基本配置
const baseVueLoaderConf = {
//引入postcss插件
postcss: {
config: {
path: _path.resolve("../")
}
},
//转为require调用,让webpack处理目标资源!
transformToRequire: {
video: "src",
source: "src",
img: "src",
image: "xlink:href"
}
};
//vue-loader 开发环境配置
const devVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
//loaders
loaders: {
css: ["vue-style-loader", "css-loader"],
less: ["vue-style-loader", "css-loader", "postcss-loader", "less-loader"] },
cssSourceMap: true
});
//vue-loader 生产环境配置
const buildVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
//loaders
loaders: ExtractTextPlugin.extract({
use: ["css-loader", "postcss-loader", "less-loader"],
fallback: "vue-style-loader"
}),
cssSourceMap: false
});
//开发/生产环境 配置参数！
module.exports = {
dev: {
publicPath: "/",
devtoolType: "cheap-module-eval-source-map",
vueloaderConf: devVueLoaderConf,
host: "localhost",
port: "1234",
proxyTable: {}
},
build: {
publicPath: "/",
devtoolType: "source-map",
vueloaderConf: buildVueLoaderConf,
staticPath: "static"
}
};七.构建build/webpack.base.conf.js
7.1 此文件主要是webpack开发环境和生成环境的通用配置.
7.2
"use strict";
//引入node path路径模块
const path = require("path");
//引入webpack生产环境配置参数
const prodConfig = require("../config").build;
//拼接路径
function resolve(track) {
return path.join(__dirname, "..", track);
}
//资源路径
function assetsPath(_path) {
return path.join(prodConfig.staticPath, _path);
}
//webpack 基本设置
module.exports = {
//项目入口文件->webpack从此处开始构建！
entry: path.resolve(__dirname, "../src/main.js"),
//配置模块如何被解析
resolve: {
//自动解析文件扩展名(补全文件后缀)(从左->右)
// import hello from './hello' （!hello.js? -> !hello.vue? -> !hello.json）
