vue cli4 x 移動端專案基礎配置 記錄

// vue.config.js

const path =
require
('path');
const compressionwebpackplugin =
require
("compression-webpack-plugin");
// 開啟gzip壓縮， 按需引用
const productiongzipextensions =
/\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
;// 開啟gzip壓縮， 按需寫入
const bundleanalyzerplugin =
require
("webpack-bundle-analyzer"
).bundleanalyzerplugin;
// 打包分析
const
is_prod=[
'production'
,'prod'].
includes
(process.env.
node_env);
const
resolve
=(dir)
=> path.
join
(__dirname, dir)
;module.exports =
,// 向 pwa 外掛程式傳遞選項。
chainwebpack: config =>);
config.resolve.alias // 新增別名
.set
('@'
,resolve
('src'))
.set
('@assets'
,resolve
('src/assets'))
.set
('@components'
,resolve
('src/components'))
.set
('@views'
,resolve
('src/views'))
.set
('@store'
,resolve
('src/store'))
;// 壓縮
// 需要 npm i -d image-webpack-loader
config.module
.rule
("images").
use(
"image-webpack-loader").
loader
("image-webpack-loader").
options(,
optipng:
,        pngquant:
,        gifsicle:
,        webp:})
;// 打包分析, 打包之後自動生成乙個名叫report.html檔案(可忽視)if(
is_prod)]
);}}
,  configurewebpack: config =>))
;}config.plugins =
[...config.plugins,
...plugins];}
,  css:},
postcss:),
require
("postcss-pxtorem")(
)]}}
},devserver:
,    host:
"localhost"
,    port:
8080
,// 埠號
,//配置自動啟動瀏覽器
hotonly:
true
,// 熱更新
// proxy: 'http://localhost:8080'  // 配置跨域處理,只有乙個**
proxy:},
"/api2":}
,}}}

cnpm i -s-

d image-webpack-loader

cnpm i -s-

d compression-webpack-plugin

cnpm i sass-loader -s-

d

cnpm i node-sass -s-

d

cnpm i postcss-pxtorem -s-

d

cnpm i amfe-flexible -s-

d

import

'amfe-flexible'

postcss:),

require
("postcss-pxtorem")(
)]}

cnpm i vant -s-

d

安裝外掛程式

cnpm i babel-plugin-

import-d
-s

module.exports =

,'vant']]
};

import

from
'vant'
;vue.
use(button)
;

cnpm i axios -s-

d

import axios from

"axios"
;

vue cli 4 x 未解之謎

全域性安裝vue cli 已經是4.x的版本，做專案隨手乙個eslient，涼涼送給自己 目前我還沒有找到如何關閉vue cli語法檢測 所以只能解除安裝4.x，安裝3.x版本 解除安裝4.x npm uninstall vue cli g安裝3.x npm i vue cli 3.0.1 g此時在...

Vue Cli 4x 新建初始化專案

vue cli 最新版本已經出到 4.5.8 了，以往的一些配置，命令可能都不一樣了 最新的vue 專案建立不是以往的 vue init webpack 這樣很可能會一直卡死，所以多看官方文件是很重要的。那麼我們廢話不多說，開始教大家新建專案 npm install vue cli g vue cr...

Vue CLI 4 x安裝和公升級方法

vue cli 4.x寫部落格 安裝方法 由於npm很慢。我就用的cnpm 可以使用下列任一命令安裝這個新的包 npm install g vue cli or yarn global add vue cli安裝之後，你就可以在命令列中訪問vue命令。你可以通過簡單執行vue，看看是否展示出了乙份所...