「Vue实践」项目升级vue-cli3的正确姿势

栏目: 编程语言 · 发布时间: 5年前

内容简介:然后去查了下旧项目的相关字眼文件:噢,原来是vue-cli3的webpack相关文件都得自己写。于是乎根据官网的指引,在根目录创建了此时粗略配置:
  • 创建vue-cli3项目,按原有项目的配置选好各项配置
    「Vue实践」项目升级vue-cli3的正确姿势
  • 迁移目录
src->src
static->public
复制代码
  • 对比新旧 package.json ,然后 yarn install ,完毕。
    「Vue实践」项目升级vue-cli3的正确姿势

然鹅... 运行项目,报错 You are using the runtime-only build of Vue......

「Vue实践」项目升级vue-cli3的正确姿势
「Vue实践」项目升级vue-cli3的正确姿势

然后去查了下旧项目的相关字眼文件:

「Vue实践」项目升级vue-cli3的正确姿势

噢,原来是vue-cli3的webpack相关文件都得自己写。于是乎根据官网的指引,在根目录创建了 vue.config.js

此时粗略配置:

chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = false
        return options
      })
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', resolve('src'))
  }
复制代码

二. 此时勉强能跑起来,但后续遇到了这些坑:

#1 public 静态资源不加载

``
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 // ....
 // 确保静态资源
 config.resolve.extensions = ['.js', '.vue', '.json', '.css']
 config.plugins.push(
  new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]),
)
```
复制代码

#2 Chrome 查看样式时无法找到源文件

「Vue实践」项目升级vue-cli3的正确姿势
原因: vue-cli3 里默认关闭 sourceMap

,样式都会被打包到首页。 解决: 需要自己配置打开

// 让样式找到源
  css: {
    sourceMap: true
  },
复制代码

#3 生产环境的 debugerconsole 无法通过 uglifyjs-webpack-pluginuglify-es 剔除

原因:不支持 es6 , 需要配置 babel ( uglify-es 按配置填会显示不存在选项)

解决:插件 terser

``
const TerserPlugin = require('terser-webpack-plugin')
if (process.env.NODE_ENV === 'production') {
  // 为生产环境修改配置...
  new TerserPlugin({
    cache: true,
    parallel: true,
    sourceMap: true, // Must be set to true if using source-maps in production
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  })
} else {
  // 为开发环境修改配置...
}
```
复制代码

#4 无法在 config 目录下配置不同环境的 API_URL ,用于跨域请求

原因: vue-cli3 中需要遵循变量规则,使用 VUE_APP 前缀

官方规则: 在客户端侧代码中使用环境变量

解决:于是你需要创建如下几个文件:

「Vue实践」项目升级vue-cli3的正确姿势

.local 也可以加在指定模式的环境文件上,比如 .env.development.local 将会在 development 模式下被载入,且被 git 忽略。

文件内容:

// env.development.local
NODE_ENV = development
VUE_APP_URL = http://xxx.x.xxx/
复制代码

#5 vue-cli代理转发控制台反复打印 "WebSocket connection to'ws://localhost..."

「Vue实践」项目升级vue-cli3的正确姿势

解决方法:

vue.config.js 中配置 devServer.proxywsfalse

结合上述两步,相对应的 vue.config.js ,需要这么写:

const env = process.env.NODE_ENV
let target = process.env.VUE_APP_URL

const devProxy = ['/api', '/']  // 代理
// 生成代理配置对象
let proxyObj = {};
devProxy.forEach((value, index) => {
  proxyObj[value] = {
    ws: false,
    target: target,
    // 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
    changeOrigin: true,
    pathRewrite: {
      [`^${value}`]: value
    }
  };
})
// ....
devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    proxy: proxyObj
  }
复制代码

最后贴上我的 vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

const path = require('path')
const env = process.env.NODE_ENV
let target = process.env.VUE_APP_URL

const devProxy = ['/api', '/']  // 代理

// 生成代理配置对象
let proxyObj = {};
devProxy.forEach((value, index) => {
  proxyObj[value] = {
    ws: false,
    target: target,
    // 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
    changeOrigin: true,
    pathRewrite: {
      [`^${value}`]: value
    }
  };
})

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: '/',
  // 让样式找到源
  css: {
    sourceMap: true
  },
  configureWebpack: config => {
    // 确保静态资源
    config.resolve.extensions = ['.js', '.vue', '.json', '.css']
    config.plugins.push(
      new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]),
    )
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      new TerserPlugin({
        cache: true,
        parallel: true,
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true
          }
        }
      })
    } else {
      // 为开发环境修改配置...
    }

  },
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = false
        return options
      })
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', resolve('src'))
  },
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    proxy: proxyObj
  }
}
复制代码

三. Eslint相关报错及配置

「Vue实践」项目升级vue-cli3的正确姿势
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'generator-star-spacing': 'off',
    'object-curly-spacing': 'off',
    // 最常出现的错误
    'no-unused-vars': 'off',
    // 最常出现的错误
    "vue/no-use-v-if-with-v-for": ["error", {
      "allowUsingIterationVar": true
    }],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}
复制代码

最后的最后,跑个项目

yarn serve

「Vue实践」项目升级vue-cli3的正确姿势
yarn build
「Vue实践」项目升级vue-cli3的正确姿势
「Vue实践」项目升级vue-cli3的正确姿势

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

中国制造2025:产业互联网开启新工业革命

中国制造2025:产业互联网开启新工业革命

夏妍娜、赵胜 / 机械工业出版社 / 2016-2-22 / 49.00

过去20年,是中国消费互联网肆意生长的"黄金20年",诞生了诸如BAT等互联网巨头,而时至今日,风口正逐渐转向了产业互联网。互联网这一摧枯拉朽的飓风,在改造了消费服务业之后,正快速而坚定地横扫工业领域,拉开了产业互联网"关键30年"的大幕。 "中国制造2025"规划,恰是中国政府在新一轮产业革命浪潮中做出的积极举措,是在"新常态"和"供给侧改革"的背景下,强调制造业在中国经济中的基础作用,认......一起来看看 《中国制造2025:产业互联网开启新工业革命》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具