vue 3.0 安裝及開發環境和測試環境配置

1.安裝
npm install -g @vue/cli

2.檢查安裝
vue -V  

3.創建項目
vue create project_name 
出現下圖信息

1.安裝 npm install -g @vue/cli

2.檢查安裝 vue -V

3.創建項目 vue create project_name 出現下圖信息

4.上圖兩種選擇方式，第一種是默認的，第二種自己選擇配置
  這里一般選擇第二種自己配置，點擊回車鍵后出現下圖信息

 

5.在上圖中選擇你需要的模塊，上下移動，空格進行確定，下圖是測試選擇的

6.選好后，敲Enter鍵，接着選擇

 

7.選擇完畢后，一路Enter，到下圖

8.模板創建完成，目錄如下

9.配置測試環境接口，線上服務器環境接口
（通過在項目根目錄下新建.env    .env.development  .env.production文件來控制）
如下圖
關於這一塊的信息，請查看[環境配置](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%A4%BA%E4%BE%8B%EF%BC%9Astaging-%E6%A8%A1%E5%BC%8F)

在目錄里加入了3個文件
.env.development 開發環境文件
.env.production 線上環境文件

在上邊3個文件中:
使用VUE_APP_URL = “接口url”
書寫格式：VUE_APP_[自定義name]

 

 

配置打包環境

 

打包后在本地預覽,你需要啟動一個node服務：
1.npm install -g serve  //全局安裝服務
2.serve -s dist   // 啟動服務預覽
獲取當前的環境:
console.log(process.env.VUE_APP_URL)

10. 其它配置寫在.vue.config.js文件中
在根目錄下新建
包括端口號，代理跨域，熱更新，多入口等，具體參考官方api
https://cli.vuejs.org/zh/config/#vue-config-js

vue.config.js（部分配置）

const path = require('path'); module.exports = { publicPath:'/', // 公共路徑 outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 不同的環境打不同包名 css: { // 一次配置，全局使用，這個scss 因為每個文件都要引入 loaderOptions: { sass: { data: `@import "./src/assets/hotcss/px2rem.scss";` } } }, lintOnSave:false, // 關閉eslint productionSourceMap:true, // 生產環境下css 分離文件 devServer:{ // 配置服務器 port:8081, open:true, https:false, overlay: { warnings: true, errors: true } }, configureWebpack:{ // 覆蓋webpack默認配置的都在這里 resolve:{ // 配置解析別名 alias:{ '@':path.resolve(__dirname, './src'), '@h':path.resolve(__dirname, './src/assets/hotcss'), '@s':path.resolve(__dirname, './src/assets/style'), '@i':path.resolve(__dirname, './src/assets/images'), } } } }