elementui源码打包 vue element admin打包

目录

一、修改vue-element-admin并打包

“npm install”安装依赖

“解决vue项目 npm run build 后打开 index.html 空白，不能访问等问题”

将登陆相关请求接口改为静态数据，不请求接口

 修改config下面的index.js中bulid模块导出的路径

npm run build打包生成dist文件夹，打开dist文件夹中index.html能正常访问即可。

 二、Electron打包Vue

1.安装配置

2、安装electron 

3、项目根目录新建main.js文件（入口文件） 

4、将vue打包好的dist文件夹中的内容拷贝的Electron打包根目录

 5、在package.json文件中配置electron命令

 三、electron-packager的使用

1、项目根目录下安装

2、配置打包命令 

3、执行打包命令 

4、在项目根目录下的dist文件夹中找到myFirstElectron.exe打开即可运行。 

---

一、修改vue-element-admin并打包

 

“npm install”安装依赖

“解决vue项目 npm run build 后打开 index.html 空白，不能访问等问题”

将登陆相关请求接口改为静态数据，不请求接口

修改文件：\src\store\modules\user.js

注释掉：Login、GetInfo、LogOut三个方法，替换为如下代码：

Login({ commit }) {
const data = {
'token': 'admin'
}
setToken(data.token)// 将token存储在cookie中
commit('SET_TOKEN', data.token)
},

GetInfo({ commit }) {
const data = {
'roles': [
'admin'
],
'name': 'admin',
'avatar': 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
}
if (data.roles &&data.roles.length >0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', data.roles)
  }
  commit('SET_NAME', )
  commit('SET_AVATAR', data.avatar)
},

// 登出
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
    commit('SET_TOKEN', '')
    commit('SET_ROLES', [])
    removeToken()
    resolve()
  })
}

问题原因：
        大部分vue 前段项目 会使用 js-cookie 这个库 来操作浏览器的cookie
        然而这个库 在electron下 会无法使用 （最坑的是还没报错）
        从而导致 登录成功以后 写cookie 读cookie的操作 全部失败
        自然而然 登录无法跳转了
解决方案：
        不使用该库 使用localStorage就行

                                修改文件：\src\utils\auth.js     之前内容全部注释或删除，替换如下代码

const TokenKey = 'Admin-Token'

// if (process.env.NODE_ENV === 'production') {
//   store = new Store()
// }

export function getToken() {
  return localStorage.getItem(TokenKey)
}

export function setToken(token) {
  return localStorage.setItem(TokenKey, token)
}

export function removeToken() {
  // if (process.env.NODE_ENV === 'production') {
  //   return store.delete(TokenKey)
  // }
  return localStorage.removeItem(TokenKey)
}

 修改config下面的index.js中bulid模块导出的路径

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
 
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
 
    //修改此处路径
    assetsPublicPath: './',  
 
 
 
    /**
     * Source Maps
     */
 
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',
 
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
 
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

npm run build打包生成dist文件夹，打开dist文件夹中index.html能正常访问即可。

 二、Electron打包Vue

1.安装配置

        新建一个空文件夹（例：electron-project）

npm init  (生成package.json文件)

2、安装electron 

cnpm install electron --save-dev

记录版本号，后面会用到

3、项目根目录新建main.js文件（入口文件） 

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
 
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
 
function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })
 
    // and load the index.html of the app.
    mainWindow.loadFile('index.html')
 
    // Open the DevTools.
    // mainWindow.webContents.openDevTools()
 
    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null
    })
}
 
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
 
// Quit when all windows are closed.
app.on('window-all-closed', function () {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') app.quit()
})
 
app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) createWindow()
})
 
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

4、将vue打包好的dist文件夹中的内容拷贝的Electron打包根目录

 5、在package.json文件中配置electron命令

"scripts": {
    "start": "electron .",
  }

                完成以上步骤，命令窗口执行npm run start 命令就可以调试内容了

 三、electron-packager的使用

1、项目根目录下安装

        cnpm install electron-packager --save-dev

2、配置打包命令 

"scripts": {
    "start": "electron .",
    "pack": "electron-packager . myFirstElectron --win --out ./dist --arch=x64 --app-version=0.0.1 --electron-version=17.0.0"
  }

一些代码的含义解释：

"."：需要打包的应用目录（.代表当前目录）。

"myFirstElectron"：应用名称。

"--win"：打包平台（windows平台）

" --out ./dist"“：输出目录

"--arch=x64"：64位

"--app-version=0.0.1"：应用版本

"--electron-version=17.0.0"：electron版本

3、执行打包命令 

npm run pack 

4、在项目根目录下的dist文件夹中找到myFirstElectron.exe打开即可运行。