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

cnpm install -g vue-cli

alias: { ‘vue$': ‘vue/dist/vue.esm.js', ‘@': resolve(‘src'), ‘RegForm': ‘@/components/RegForm.vue' //新增 }

// 检查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:8080var 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设置的端口，即8080var port = process.env.PORT || config.dev.port// 用于判断是否要自动打开浏览器的布尔变量，当配置文件中没有设置自动打开浏览器的时候其值为 falsevar 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使用之后即可访问这些编译后的产品文件var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, quiet: true})// webpack-hot-middleware，用于实现热重载功能的中间件var hotMiddleware = require('webpack-hot-middleware')(compiler, { log: () => {}})// 当html-webpack-plugin提交之后通过热重载中间件发布重载动作使得页面重载compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {  hotMiddleware.publish({ action: 'reload' })  cb() })})// 将 proxyTable 中的代理请求配置挂在到express服务器上Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] // 格式化options，例如将'www.example.com'变成{ target: 'www.example.com' } if (typeof options === 'string') {  options = { target: options } } app.use(proxyMiddleware(options.filter || context, options))})// handle fallback for HTML5 history API// 重定向不存在的URL，常用于SPAapp.use(require('connect-history-api-fallback')())// serve webpack bundle output// 使用webpack开发中间件// 即将webpack编译后输出到内存中的文件资源挂到express服务器上app.use(devMiddleware)// enable hot-reload and state-preserving// compilation error display// 将热重载中间件挂在到express服务器上app.use(hotMiddleware)// serve pure static assets// 静态资源的路径var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)// 将静态资源挂到express服务器上app.use(staticPath, express.static('./static'))// 应用的地址信息，例如：http://localhost:8080var uri = 'http://localhost:' + port// webpack开发中间件合法（valid）之后输出提示语到控制台，表明服务器已启动devMiddleware.waitUntilValid(function () { console.log('> Listening at ' + uri + '/n')})// 启动express服务器并监听相应的端口（8080）module.exports = app.listen(port, function (err) { if (err) {  console.log(err)  return } // when env is testing, don't need open it // 如果符合自动打开浏览器的条件，则通过opn插件调用系统默认浏览器打开对应的地址uri if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {  opn(uri) }})

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 chunksObject.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() ]})

// https://github.com/shelljs/shelljs// 检查NodeJS和npm的版本require('./check-versions')()process.env.NODE_ENV = 'production'// Elegant terminal spinnervar 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' ))})

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' ? require('../config/test.env') : config.build.env// 合并基础的webpack配置var webpackConfig = merge(baseWebpackConfig, { module: {  rules: utils.styleLoaders({   sourceMap: config.build.productionSourceMap,   extract: true  }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, // 配置webpack的输出 output: {  // 编译输出目录  path: config.build.assetsRoot,  // 编译输出文件名格式  filename: utils.assetsPath('js/[name].[chunkhash].js'),  // 没有指定输出名的文件输出的文件名格式  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, // 配置webpack插件 plugins: [  // http://vuejs.github.io/vue-loader/en/workflow/production.html  new webpack.DefinePlugin({   'process.env': env  }),  // 丑化压缩代码  new webpack.optimize.UglifyJsPlugin({   compress: {    warnings: false   },   sourceMap: true  }),  // 抽离css文件  new ExtractTextPlugin({   filename: utils.assetsPath('css/[name].[contenthash].css')  }),  // generate dist index.html with correct asset hash for caching.  // you can customize output by editing /index.html  // see https://github.com/ampedandwired/html-webpack-plugin  new HtmlWebpackPlugin({   filename: process.env.NODE_ENV === 'testing'    ? 'index.html'    : config.build.index,   template: 'index.html',   inject: true,   minify: {    removeComments: true,    collapseWhitespace: true,    removeAttributeQuotes: true    // more options:    // https://github.com/kangax/html-minifier#options-quick-reference   },   // necessary to consistently work with multiple chunks via CommonsChunkPlugin   chunksSortMode: 'dependency'  }),  // split vendor js into its own file  new webpack.optimize.CommonsChunkPlugin({   name: 'vendor',   minChunks: function (module, count) {    // any required modules inside node_modules are extracted to vendor    return (     module.resource &&     //.js$/.test(module.resource) &&     module.resource.indexOf(      path.join(__dirname, '../node_modules')     ) === 0    )   }  }),  // extract webpack runtime and module manifest to its own file in order to  // prevent vendor hash from being updated whenever app bundle is updated  new webpack.optimize.CommonsChunkPlugin({   name: 'manifest',   chunks: ['vendor']  }) ]})// gzip模式下需要引入compression插件进行压缩if (config.build.productionGzip) { var CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push(  new CompressionWebpackPlugin({   asset: '[path].gz[query]',   algorithm: 'gzip',   test: new RegExp(    '//.(' +    config.build.productionGzipExtensions.join('|') +    ')$'   ),   threshold: 10240,   minRatio: 0.8  }) )}if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin())}module.exports = webpackConfig

// 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 }}

  if (options.extract) {       return ExtractTextPlugin.extract({              use: loaders,              fallback: 'vue-style-loader',              publicPath:'/'  })