“Vue Practice” project to upgrade vue-CLI3 correct posture

I thought the vue-CLI3 upgrade route was like this:

• Create the Vue-CLI3 project and select the configuration according to the original project configuration
  

  

• Migration directory

src->src
static->public
Copy the code

• Comparing the old and newpackage.jsonAnd thenyarn install, finished.
  

  

However, the goose… Error reported while running projectYou are using the runtime-only build of Vue......:

Then I checked the old project’s related word files:

I have to write my own webpack files for vue-CLI3. Using the official website, you create vue.config.js in the root directory

The rough configuration is as follows:

  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(The '@', resolve('src'))}Copy the code

2. Barely able to run at this point, but then encountered these pits:

# 1Public Static resources are not loaded

``` const CopyWebpackPlugin = require('copy-webpack-plugin') // .... / / ensure static resource config. Resolve. Extensions = [' js', 'vue', 'json', '.css'] config.plugins.push( new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]), ) ```Copy the code

# 2Chrome could not find the source file when viewing the styles

vue-cli3
sourceMap

// Let the style find the source CSS: {sourceMap: true
  },
Copy the code

# 3Production environmentaldebugerandconsoleUnable to getuglifyjs-webpack-plugin 和 uglify-esTo eliminate

Cause: ES6 is not supported, Babel needs to be configured (uglify-ES does not exist)

Solution: Plugins terser

' ' 'const TerserPlugin = require('terser-webpack-plugin') if (process.env.node_env === 'production') {// Modify configuration for production environment... 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 {// Modify the configuration for the development environment... } ` ` `Copy the code

# 4Can’t inconfigDirectory for different environmentsAPI_URLFor cross-domain requests

Cause: VUE_APP prefix is used in vue-cli3 to follow the variable rule

Official rule: Use environment variables in client-side code

Solution: Then you need to create the following files:

Local can also be added to environment files in the specified mode. For example,.env.development.local will be loaded in development mode and will be ignored by Git.

File content:

// env.development.local
NODE_ENV = development
VUE_APP_URL = http://xxx.x.xxx/
Copy the code

# 5Vue – CLI agent forwarding console print repeatedly"WebSocket connection to'ws://localhost..."

Solution:

Set ws of devServer.proxy to false in vue.config.js

Combined with the above two steps, the corresponding vue.config.js should be written like this:

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

const devProxy = ['/api'.'/'] // proxy // generate proxy configuration objectslet proxyObj = {};
devProxy.forEach((value, index) => {
  proxyObj[value] = {
    ws: false, target: target, // Enable proxy: a virtual server is created locally, and then sends the requested data and receives the requested data at the same time.true,
    pathRewrite: {
      [`^${value}`]: value } }; }) / /... devServer: { open:true,
    host: 'localhost',
    port: 8080,
    proxy: proxyObj
  }
Copy the code

Put mine on at the endvue.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'.'/'] // proxy // generate proxy configuration objectslet proxyObj = {};
devProxy.forEach((value, index) => {
  proxyObj[value] = {
    ws: false, target: target, // Enable proxy: a virtual server is created locally, and then sends the requested data and receives the requested data at the same time.true,
    pathRewrite: {
      [`^${value}`]: value
    }
  };
})

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

module.exports = {
  publicPath: '/'// let the style find the source CSS: {sourceMap: true}, configureWebpack: config = > {/ / make sure static resource config. Resolve. Extensions = ['.js'.'.vue'.'.json'.'.css']
    config.plugins.push(
      new CopyWebpackPlugin([{ from: 'public/', to: 'public'}]),if (process.env.NODE_ENV === 'production') {// Modify the configuration for the production environment... 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{// Modify the configuration for the development environment... } }, 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(The '@', resolve('src'))
  },
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    proxy: proxyObj
  }
}
Copy the code

Eslint related errors and configurations

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential'.'@vue/standard'
  ],
  rules: {
    'generator-star-spacing': 'off'.'object-curly-spacing': 'off', // The most common error'no-unused-vars': 'off', // The most common error"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'}}Copy the code

Finally, run an event

yarn serve

yarn build

A collection of the author’s articles

• “Learn from source code” thoroughly understand the Vue option Props
• “Vue Practice” project to upgrade vue-CLI3 correct posture
• “Learn from the source code” Vue source code in JS SAO operation
• Why do you never understand JavaScript scope chains?