vue-cli3 搭建新項目 以及環(huán)境變量的配置

1、首先要卸載你的老版本腳手架,npm uninstall vue-cli -g

2、安裝cli3? ?npm install -g @vue/cli

??????? ?如果網絡慢,跨域使用cnpm 【 安裝淘寶鏡像:npm i -g cnpm--registry=https://registry.npm.taobao.org? 】

3、創(chuàng)建項目:vue create your-project-name

??????? ?項目名稱【 your-project-name 】不能駝峰命名。

4、選擇一個預設?

? ? ? ? ? ?一、【選擇默認?】等待創(chuàng)建后續(xù)的工具需要手動安裝 例如:axios、router、vuex等;

? ? ? ? ? ? ? ? ? 創(chuàng)建完成后????? ?cd your-project-name? ??? ?npm run serve

? ? ? ? ? ? ? ? ? ? 如果要處理跨域問題需要手動在根目錄【src同級目錄】下創(chuàng)建vue.config.js? ? ? ? ? ? ? ? ? ??

module.exports = {

? publicPath: process.env.NODE_ENV === 'prodection' ? './' : '/',

? productionSourceMap: false, // 生產源映射 如果不需要生產時的源映射,可以加速生產構建

? devServer: {

? ? port: 8090,

? ? host: 'localhost',

? ? // https: true,

? ? proxy: {

? ? ? '/api': {

? ? ? ? target: 'http://42.120.7.54:8882/',

? ? ? ? ws: true,

? ? ? ? changeOrigin: true,

? ? ? ? pathRewrite: {

? ? ? ? ? '^/api': ''

? ? ? ? }

? ? ? },

? ? ? '/rbs': {

? ? ? ? target: 'https://mtest.picclife.cn/vp-policy-web/'

? ? ? }

? ? }

? }

}

??? 至于為什么要使用 publicPath而不是baseUrl請看運行結果

? ? ? ? ? ? ? ? ? 二、選擇 Manually select features? 方式

選擇用到的配置

路由模式history

CSS??pre-processor

ESLint + Standard config?

等待創(chuàng)建 ??? ?項目創(chuàng)建完成? ??? ??? ??

其他問題后續(xù)補充。。。

? ? ? ? 補充來了? ? 配置環(huán)境變量

vue-cli3 提供了四種方式來定制環(huán)境變量

????1、在根目錄下添加.env 文件,配置所有情況下都會用到的配置;

? ? 2、在根目錄下添加.env. local 文件,配置所有情況下都會用到的配置,與.env不同的是它只會在本地,不會被git跟蹤;

? ? 3、在根目錄下添加.env. [ mode ] 文件,配置對應模式下的配置,.env.development來配置開發(fā)環(huán)境;

? ? 4、在根目錄下添加.env. [ mode ]. local 文件,配置對應某個模式下的配置,與.env.[mode]的區(qū)別也只是會在本地生效,該文件不會被git跟蹤。

環(huán)境變量的使用?

? ? 1、在項目中(src)使用變量要通過VUE_APP_( 開頭 ),可以通過process. env. VUE_APP_XX得到;

? ? 2、在webpack中獲取變量 process. env. xxx

? ? 3、在public/index.html中使用的? ??<link rel="icon" href="<%= BASE_URL %>favicon.ico">

模式 mode

在vue-cli 中有三種模式

? ? 1、development:在vue-cli-service serve下,即開發(fā)環(huán)境使用

? ? 2、production:在vue-cli-service build和vue-cli-service test:e2e下,即正式環(huán)境使用

? ? 3、test: 在vue-cli-service test:unit下使用

? ??另外,如果你想要修改模式下默認的環(huán)境變量的話可以通過--mode來實現(xiàn),例如:

"dev-build":"vue-cli-service build --mode development"




這里聲明的NODE_ENV = ‘development’用來表示這是生產環(huán)境。VUE_APP_CURRENTMODE為項目變量,publicPath為除數打包后文件的地址。

在vue.config.js中使用環(huán)境變量,制定輸出文件為環(huán)境變量配置的文件:


publicPath:對應你自己的環(huán)境path

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容