Vue-cli3.0搭建和一些坑

時間 2019-11-12

標籤 vue cli3.0 cli 搭建一些简体版

原文原文鏈接

[2018-07-31更新]： vue-cli 3.0正式版的中文文檔已經出來了，詳細的能夠參考：https://cli.vuejs.org/zh/guide/css

1、安裝Vue和建立項目:html

# 安裝
npm install -g @vue/cli
注：快捷鍵win+R，輸入cmd並運行，默認C盤，可設置對應的磁盤，如F盤， 輸入cd\到C盤更目錄，再輸入f:進入F盤，最後就是本身自定義的文件夾cd vue

# 查看已安裝版本
vue --version 或者 vue -V

# 卸載
npm uninstall @vue/cli -g

# 新建項目
vue create my-project
注：建立自定義項目(my-porject)的時候，可自定義設置項目相關配置，能夠End默認，若是設置了的能夠在vue.config.js配置文件中再次修改。

# 項目啓動
npm run serve 
# 打包
npm run build

2、Vue相關配置--vue.config.jsvue

Vue-cli3.0的配置不一樣於以前版本，大大的簡化了開發者工做，更人性化，只有一個配置文件-vue.config.js。node

經常使用配置：一、樣式預處理less，sass，公共樣式文件設置jquery

　　　　　二、端口設置和熱加載webpack

　　　　　三、第三方插件git

vue.config.js --- 基礎模版github

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '//your_url'
    : '/',
  outputDir: 'dist', //生成的生產環境構建文件的目錄
  assetsDir: 'static',  // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於  的) 目錄。
outputDir

　　 indexPath: 'index.html', //指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也能夠是一個絕對路徑。

  filenameHashing: true,

  // When building in multi-pages mode, the webpack config will contain different plugins
  // (there will be multiple instances of html-webpack-plugin and preload-webpack-plugin).
  // Make sure to run vue inspect if you are trying to modify the options for those plugins.
  // 在 multi-page 多頁面模式下構建應用。每一個「page」應該有一個對應的 JavaScript 入口文件，多頁面配置(web，h5等)，當前只有一個單頁面,能夠不用配置  pages: {

    index: {
      // entry for the pages
      entry: 'src/pages/index/index.js',
      // the source template
      template: 'src/pages/index/index.html',
      // output as dist/index.html
      filename: 'index.html',
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: '首頁',
      // chunks to include on this pages, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
    // when using the entry-only string format,
    // template is inferred to be `public/subpage.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `subpage.html`.
    // subpage: ''
  },

  // eslint-loader 是否在保存的時候檢查
  lintOnSave: true,

  // 是否使用包含運行時編譯器的Vue核心的構建
  runtimeCompiler: false,

  // 默認狀況下 babel-loader 忽略其中的全部文件 node_modules
  transpileDependencies: [],

  // 生產環境 sourceMap
  productionSourceMap: false,

  // cors 相關 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
  // corsUseCredentials: false,
  // webpack 配置，鍵值對象時會合並配置，爲方法時會改寫配置
  // https://cli.vuejs.org/guide/webpack.html#simple-configuration
  configureWebpack: (config) => {

　　　　　resolve: {

　　alias: {

'@': resolve('src')

　　}

plugins: [

　　// webpack 配置jq, 配置目錄別名

　　new webpack.ProvidePlugin({

　$: "jquery",

jQuery: "jquery",

"windows.jQuery": "jquery"

　　})

]

// webpack 連接 API，用於生成和修改 webapck 配置 // https://github.com/mozilla-neutrino/webpack-chain chainWebpack: (config) => { // 由於是多頁面，因此取消 chunks，每一個頁面只對應一個單獨的 JS / CSS  config.optimization .splitChunks({ cacheGroups: {} }); // 'src/lib' 目錄下爲外部庫文件，不參與 eslint 檢測  config.module .rule('eslint') // 不想校驗能夠註釋掉
　　　　.use('vue-loader') 
　　　　.loader('vue-loader') }, // 配置高於chainWebpack中關於 css loader 的配置  css: { // 是否開啓支持 foo.module.css 樣式 modules: false, // 是否使用 css 分離插件 ExtractTextPlugin，採用獨立樣式文件載入，不採用 <style> 方式內聯至 html 文件中 extract: true, // 是否構建樣式地圖，false 將提升構建速度 sourceMap: false, // css預設器配置項  loaderOptions: {
　　　　modules: false,
　　　　extract: true,
　　　　sourceMap: false,
　　　　css: { // options here will be passed to css-loader
　　　　　data: `@import "@/assets/sass/base.scss";` //導入公共樣式文件
 }, postcss: { // options here will be passed to postcss-loader  } } }, // All options for webpack-dev-server are supported // https://webpack.js.org/configuration/dev-server/  devServer: { open: true, host: '127.0.0.1', port: 3000,  // 若是端口衝突，配置端口號  https: false, hotOnly: false, proxy: null, before: app => { } }, // 構建時開啓多進程處理 babel 編譯 parallel: require('os').cpus().length > 1, // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa  pwa: {}, // 第三方插件配置  pluginOptions: {} };