Vue 项目配置问题汇总

1. Property 'extend' is missing in type '<VC extends VueClass<{}>>(target: VC) => VC'.

详细： 使用vue-class-component 时错误

import Component from 'vue-class-component'

@Component
export default class Login extends Vue {
}

处理方式： add in tsconfig.json

"strictFunctionTypes": false

原因：TypeScript 2.6 新特性： Strict function types

2. webpack4.X 升级问题

需要同时升级的控件列表：

    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.1.0",
    "css-loader": "^0.28.11",
    "ts-loader": "^3.5.0",
    "typescript": "^2.8.1",
    "vue-loader": "^14.2.2",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"

webpack-cli 是新增依赖
vue-loader 升级到15.X.X-beta.0 版本 报错

3.1 vue webpack 配置问题

When using vue-loader or vueify, templates inside *.vue files are pre-compiled into JavaScript at build time. You don’t really need the compiler in the final bundle, and can therefore use the runtime-only build.
Make sure that all your components are defined in *.vue files, because they are pre-compiled.
正确示例 用 render：
index.ts

import Vue from "vue";
import app from './app.vue';

new Vue({ router, store, render: h => h(app) }).$mount('#app');  

app.vue

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>  

不用render的话必须设置'vue$': 'vue/dist/vue.esm.js'

    resolve: {
      extensions: [".js", ".ts", '.vue'],
      alias: {
        '@': path.resolve(workingDir, 'src'),
        'vue$': 'vue/dist/vue.esm.js'
      }
    }

不设置的错误提示

vue.runtime.esm.js?2b0e:567 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

3.2 vue webpack 配置问题

必须设置 appendTsxSuffixTo: [/\.vue$/]

 {
  test: /\.ts(x?)$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'ts-loader',
      options: {
        appendTsxSuffixTo: [/\.vue$/] 
      },
    },
  ]
},

否则 <script lang="ts" > 嵌套的ts代码无法解析

4. vuex-class 模块化使用方式`

import Vue from 'vue'
import Component from 'vue-class-component'
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'
const ModuleGetter = namespace('counter', Getter)
const ModuleState = namespace('counter', State)
const ModuleAction = namespace('counter', Action)

@Component
export default class Counter extends Vue {
  
  @ModuleState count
  @ModuleGetter evenOrOdd
  @ModuleAction increment
  @ModuleAction decrement
  @ModuleAction incrementIfOdd
  @ModuleAction incrementAsync
}

5. css 配置方式

不在vue-loader下配置的话， css不能分离

{
  test: /\.vue$/,
  use: [{
    loader: 'vue-loader',
    options: {
      loaders: {
        css: [
           MiniCssExtractPlugin.loader,
           'css-loader',
           'postcss-loader',                      
        ]
      }
    },
  }]
},

转载自: https://github.com/ythy/blog/issues/61